思路：
- 获取全选按钮及其他按钮组
- 全选和取消全选 按钮组的选中状态同全选按钮
- 设置一个flag变量,全选按钮的状态为flag 。点击一个按钮时遍历按钮组中所有的按钮状态，按钮组中有一个为未被选中状态，flag = false .反之 flag = true
全部代码
<body>
<div>
<label for="">全选</label>
<input type="checkbox" name="" id="check_all" />
</div>
<div id="check_items">
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
<script>
// 1.获取全选按钮及其他按钮组
var check_all = document.getElementById("check_all");
var check_items = document
.getElementById("check_items")
.getElementsByTagName("input");
// 2.全选和取消全选 按钮组的选中状态同全选按钮
check_all.onclick = function () {
for (var i = 0; i < check_items.length; i++) {
check_items[i].checked = this.checked;
}
};
// 3.设置一个flag变量,全选按钮的状态为flag 。点击一个按钮时遍历按钮组中所有的按钮状态，
// 按钮组中有一个为未被选中状态，flag = false .反之 flag = true
for (let i = 0; i < check_items.length; i++) {
check_items[i].onclick = function () {
var flag = true;
for (let index = 0; index < check_items.length; index++) {
if (!check_items[index].checked) {
flag = false;
break
}
break;
}
check_all.checked = flag;
};
}
</script>
</body>