全选反选的小案例

电商网站中当选中一个总按钮那么其他分按钮衣会被选中，而同理当每一个分按钮被选中的时候总按钮也能反过来被选中，这个小功能在购物车里很常见

HTML代码如下：

<body>
	<label for="all">全选</label><input type="checkbox" id="all">
	<div id="check">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
		<input type="checkbox">
	</div>
</body>
</html>

　　JS代码及注释

var all = document.getElementById("all");
var input = document.getElementById("check").getElementsByTagName("input");
//全选按钮点击事件 当全选按钮被选中的时候遍历每一个input按钮让他们都被选中
//否则让他们都不选中
all.onclick = function() {
	if(all.checked){
		for(var i=0;i<input.length;i++){
			input[i].checked = true;
		}
	}else{
		for(var i=0;i<input.length;i++){
			input[i].checked = false;
		}
	}
}



for(var i=0;i<input.length;i++){
	//给每一个小按钮添加事件
	input[i].onclick = function(){ 
 //无序按下其中一个按钮这个事件后遍历每一个按钮如果其他的按钮都被勾选那么这时全选框状态也为勾选；否则不勾选
		var bStop = true;
//遍历每一个小按钮的状态  如果这个按钮的状态为false的话  就证明有一个没有被选中    
		for(var j=0;j<input.length;j++){  
			if(!input[j].checked){    //遍历之后如果某个按钮没被选中说明为false，取反然后为true然后让bstop为false
				console.log(1)
				bStop = false;
				break;       //跳出循环然后执行循环后面的代码
			}
		}

		if(bStop){  //这里是所有的按钮都为true的时候bstop为true说明所有按钮都被选中了
			all.checked = true;
		}else{
			all.checked = false;  //这里是存在没有勾选的按钮那么bstop为false执行的代码
		}
	}
}

全选反选的小案例

猜你喜欢