版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
一、需求：
- 全选： 点击全选，所有选项被选中；
- 全不选：全选情况下再次点击全选框，所有选项都不选；
- 相应的反作用：
a. 全选情况下，取消某一个至全部子选项，全选框也变为不选中；
b. 没有选中全选的情况下，选中了所有子选项，全选框自动选中。
二、最终实现：
0、原则
朝着 “高内聚，低耦合” 原则前进，终于改到自己不会再改的地步了。由于元素的事件属性也是在JS文件添加的，算是实现了HTML文件的零JS代码污染。并且代码也精简到自己没能力再精简的地步了。废话少说，最终的代码如下：
1、HTML源码：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>复选框练习</title>
<script src="js/checkbox.js"></script>
</head>
<body>
<fieldset>
<legend>您喜欢的汽车：</legend>
<label><input type="checkbox" name="car" value="baoma">宝马</label>
<label><input type="checkbox" name="car" value="benchi">奔驰</label>
<label><input type="checkbox" name="car" value="dazhong">大众</label>
<label><input type="checkbox" name="car" value="xiandai">现代</label>
</fieldset>
<label><input id="ctrlAll" type="checkbox">全选</label>
</body>
2、JS源码：
// 实现一个复选框控制一系列复选框的全选与全不选，以及反作用。
onload = function () {
var all = document.getElementById("ctrlAll");
var checkboxList=document.getElementsByName("car");
var checkedNum = 0; // 选中的子选项个数
// 给全选框添加事件：使全选框可以控制全选和全不选。
all.addEventListener("click", function(){
for (let i=0;i<checkboxList.length;i++) {
checkboxList[i].checked = all.checked;
}
//全选，checkedNum等于子选项的总数
//全不选，checkedNum等于0
checkedNum = all.checked * checkboxList.length;
});
// 添加事件：鼠标点击某个子选项时，检查和修正全选框。
for (let i=0;i<checkboxList.length;i++) {
checkboxList[i].addEventListener("click", function(){
checkboxList[i].checked ? ++checkedNum : --checkedNum;
all.checked = (checkedNum == checkboxList.length);
});
}
};