- A+
所属分类：Web前端
代码直接放在HTML页面即可运行，不理解的地方可以查看注释或评论区交流
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS实现复选框全选和全不选</title> <script type="text/javascript"> window.onload = function() { // 通过ID获取到全选按钮 var checkAll = document.getElementById("checkAll"); // 获取到name属性为"hobby"的所有按钮 var hobby = document.getElementsByName("hobby"); // 点击按钮进行全选和全不选 checkAll.onclick = function() { for (var i = 0; i < hobby.length; i++) { /* 根据全选按钮属性为true/false时 同时将属性值赋值给每一个"hobby"按钮 */ hobby[i].checked = checkAll.checked; } } /*当所有其他选项都被选中时，全选按钮才是选中状态*/ // 获取name属性为"hobby"按钮的数量 var length = hobby.length; // 页面加载完成后此循环用来获取每一个"hobby"按钮 for (var i = 0; i < length; i++) { // 当"hobby"按钮触发点击时间时执行以下函数 hobby[i].onclick = function() { // 定义一个计数变量 var count = 0; // 点击事件触发后执行此循环 for (var i = 0; i < length; i++) { // 如果有一个"hobby"复选框被选中，count计数加一 if (hobby[i].checked == true) { count++; } } /* 当"hobby"复选框被选中数量和"hobby"复选框总数量相同时， 将返回的值true赋值给全选按钮，反之亦然 */ checkAll.checked = (count == length); } } } </script> </head> <body> <input type="checkbox" name="hobby" id="smoke" />抽烟<br /> <input type="checkbox" name="hobby" id="drink" />喝酒<br /> <input type="checkbox" name="hobby" id="perm" />烫头 <hr /> <input type="checkbox" name="checkAll" id="checkAll" />全选<br /> </body> </html> 运行结果：
