全選、全不選、反選功能的實現

阿新 • • 發佈：2021-01-27

技術標籤：前端 js javascript checkbox css html

全選、全不選、反選

實現的功能是：
選中下面全選框，全部的框都會選中，反之就會全不選中；
當點選反選按鈕時，選擇框中的選框狀態置反，選中的變為沒選中，沒選中變為選中
直接上程式碼：
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全選、全不選、反選</title>
	</head>
	<body>
		< 
form action="">
			<p><input type="checkbox"name=""id="" />熊大</p>
			<p><input type="checkbox"name=""id="" />翠花</p>
			<p><input type="checkbox"name=""id="" />光頭強</ 
p>
			<p><input type="checkbox"name=""id="" />喜洋洋</p>
		</form>
		<button onclick="checkall(0)">全選</button>
		<button onclick="checkall(1)">全不選</button>
		<button onclick="checkall(2)">反選</ 
button>
		<!--<script type="text/javascript">
			//選中的三個表現形式，①使用者選中；②標籤中的checked屬性③js中checked屬性為ture
			let but = document.getElementsByTagName('button');
			let inp = document.getElementsByTagName('input');
			//1.全選
			but[0].onclick = function(){
				for (let i = 0; i < inp.length; i++) {
					inp[i].checked = true;
				}				
			}
			//2.全不選
			but[1].onclick = function(){
				for (let i = 0; i < inp.length; i++) {
					inp[i].checked = false;
				}				
			}
			//3.反選
			but[2].onclick = function(){
				for (let i = 0; i < inp.length; i++) {
					inp[i].checked = !inp[i].checked;
				}				
			}			
		</script>-->
		<!--方法二： 優化程式碼-->
		<script type="text/javascript">			
			let but = document.getElementsByTagName('button');
			let inp = document.getElementsByTagName('input');
			function checkall(num){
				for (let i = 0; i < inp.length; i++) {
					if (num == 0) {//全選
						inp[i].checked = true;
					}
					if (num == 1) {//全不選
						inp[i].checked = false;
					}
					if (num == 2) {//反選
						inp[i].checked = !inp[i].checked;
					}
				}	
			}
		</script>
	</body>
</html>

效果如下：
在這裡插入圖片描述

火星上出生的孩子長啥樣：骨骼脆弱、視力不佳、面板可能變綠

11 月 12 日訊息，據外媒報道，美國太空探索技術公司 SpaceX 創始人埃隆・馬斯克 (Elon Musk) 希望將人類送上火星殖民，以此幫助人類成為“多行星物種”，從而延續人類的文明。然而，這可能會導致火星出生的兒童遭受

Js實現複選框的全選、全不選反選功能程式碼例項

主要是用遍歷的方法查詢元素，然後通過改變checked的屬性來選擇，為true則是選中狀態，為false則是未選狀態

使用jQuery實現複選框的全選、反選和不選

技術標籤：jqueryjs 使用jQuery實現複選框的全選、反選和不選通過給按鈕繫結點選事件來控制

Jquery checkbox（全選/不全選、反選、單選、獲取選中的值）

技術標籤：Jqueryjquery <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

使用document方法完成全選、全不選和反選

技術標籤：htmlhtml //全選的方法 function qx(){ //獲取所有的複選框 var plsc = document.getElementsByName("plsc");

全選、全不選、反選功能的實現

技術標籤：前端jsjavascriptcheckboxcsshtml 全選、全不選、反選實現的功能是：選中下面全選框，全部的框都會選中，反之就會全不選中；當點選反選按鈕時，選擇框中的選框狀態置反，選中的變為沒選中，沒選中變

js實現表單項的全選、反選及刪除操作示例

本文例項講述了js實現表單項的全選、反選及刪除操作。分享給大家供大家參考，具體如下：

js全選、反選

技術標籤：前端jsjavascript 概述前端實現表單全選，反選功能的案例還是蠻多的，為了方便以後複用，這裡對其做個總結:

vue使用el-tree實現全選、反選

vue使用el-tree實現全選、反選下拉樹全選、反選根據輸入字元過濾 <el-dialog class=\"dialog\"

購物車chenckbox的全選全不選部分選反選功能實現

1.data裡面先定義兩個變數，一個是定義總的checkbox，一個是定義列表的checkbox data () {

jQuery 全選與全不選，反選

1.不帶選項框 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

全選反選不選

<buttonid=\"qx\">全選</button> <buttonid=\"fx\">反選</button> <buttonid=\"bx\">不選</button>

Vue常用的全選/反選的示例程式碼

在Vue中執行CheckBox的全選反選有很多方法我覺得最易懂，速度最快的方法就是這個！

使用jQuery完成複選框的全選和全不選

要完成這個效果，必然要了解jQuery中對屬性操作的方法： attr()：設定或返回被選元素的屬性值。

js實現全選和全不選功能

本文例項為大家分享了js實現全選和全不選的具體程式碼，供大家參考，具體內容如下

js實現全選和全不選

本文例項為大家分享了js實現全選和全不選的具體程式碼，供大家參考，具體內容如下

廣州最全辦證一天搞定、辦畢業證指南,拿走不謝!

廣州辦證〖薇Q:9560-52852(同號)】無.需.點.開/長.期.有.效!辦理文憑學歷畢業證-學位證-教師證-離婚證-四級成績單-計算機等級證-各類證C++專.業.辦.理-質.量.上.乘-

北京最全辦證一天搞定、辦畢業證指南,拿走不謝!

北京最全辦證〖薇Q:9560-52852(同號)】無.需.點.開/長.期.有.效!辦理文憑學歷畢業證-學位證-教師證-離婚證-四級成績單-計算機等級證-各類證C++專.業.辦.理-質.量.上.乘-

上海最全辦證一天搞定、辦畢業證指南,拿走不謝!

〖薇Q:9560-52852(同號)】無.需.點.開/長.期.有.效!辦理文憑學歷畢業證-學位證-教師證-離婚證-四級成績單-計算機等級證-各類證C++專.業.辦.理-質.量.上.乘-

武漢最全辦證一天搞定、辦畢業證指南,拿走不謝!

武漢辦證〖薇Q:9560-52852】無.需.點.開/長.期.有.效!辦理文憑學歷畢業證-學位證-教師證-離婚證-四級成績單-計算機等級證-各類證C++專.業.辦.理-質.量.上.乘-