效果：有全选选项框和单个选项框，选择全选框，所有的的选择都打上的钩，取消全选钩所有的都去掉了钩，如果取消其中某一个的钩，那么全选的钩也取消，反之全选所有的选项，那么全选的钩就会打上。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScript_test</title> <script src="test.js" type="text/javascript"></script> <link href="test.css" type="text/css" rel="stylesheet"> </link> <style> * { margin: 0; padding: 0; } .div_center_ab { position: absolute; top: 50%; left: 50%; width: 14%; height: 30%; border: 2px solid #6A7006; transform: translate(-50%, -50%); } .div_center_re { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> </head> <body > <div class=" div_center_ab"> <div class="div_center_re"> 全选 <input type="checkbox" id="boxall"> <br> <hr> 选项1 <input type="checkbox"> <br> 选项2 <input type="checkbox"> <br> 选项3 <input type="checkbox"> <br> 选项4 <input type="checkbox"> <br> </div> </div> <script> var boxall=document.getElementById("boxall") var boxse=document.querySelectorAll("input:nth-child(n+2)") console.log(boxall) console.log(boxse) boxall.onclick=function(){ var checkall=boxall.checked for(var i=0;i<boxse.length;i++) boxse[i].checked=checkall; } //判断不同选项是否被选中 for(var i=0;i<boxse.length;i++){ boxse[i].onclick=function(){ var flag=true for(var j=0;j<boxse.length;j++){ if(boxse[j].checked===false){ flag=false break } } boxall.checked=flag } } </script> </body> </html>
