js实现全选全不选反选的功能_请利用html dom实现全选全不选反选功能-CSDN博客

本文链接：https://blog.csdn.net/weixin_44440256/article/details/87866768

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1>请选择你的爱好：</h1>
	<input type="checkbox" name="" id="cex">全选/全不选
	<div id="box">
	<input type="checkbox" name="">足球
	<input type="checkbox" name="">篮球
	<input type="checkbox" name="">游泳
	<input type="checkbox" name="">唱歌
	</div>
	<button id="btn1">全选</button>
	<button id="btn2">全不选</button>
	<button id="btn3">反选</button>
	<script type="text/javascript">
		var a=document.getElementById('cex');
		var b=document.getElementsByTagName('input');
	    //全选
		document.getElementById('btn1').onclick=function(){
			for (var i = 0; i < b.length; i++) {
				b[i].checked=true;
			}
		};
		//全不选
		document.getElementById('btn2').onclick=function(){
			for (var i = 0; i < b.length; i++) {
				b[i].checked=false;
			}
		};
		
		//如果有未选中的,取消全选
		function select(){
			var count=0;
			for (var i = 1; i < b.length; i++) {
				if (b[i].checked) {
					count++;
					//console.log(count);
				}
			}
			if (count==b.length-1) {
                a.checked=true;
			}else{
				a.checked=false;
			}
		}
		//如果有未选中的,取消全选
		for (var j = 1; j < b.length; j++) {
			b[j].onclick=function(){
				select();
			};
		}
	    //反选
		document.getElementById('btn3').onclick=function(){
			for (var i = 1; i < b.length; i++) {
			 var value=b[i];
			 if (value.checked) {
			 	value.checked=false;
			 }else{
			 	value.checked=true;
			 }
		  }
		 select();
		};

	</script>
</body>
</html>