效果如下：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全选按钮</title>
<style>
li {
list-style: none;
}
</style>
</head>
<body>
<div class="box1">
<input type="checkbox" id="box1">全选1
</div>
<ul>
<li><input type="checkbox">1</li>
<li><input type="checkbox">2</li>
<li><input type="checkbox">3</li>
</ul>
<div class="box2">
<li><input type="checkbox" id="box2">全选2</li>
</div>
<script>
var input1 = document.querySelector('#box1');
var input = document.querySelector('ul').querySelectorAll('input');
var input2 = document.querySelector('#box2');
//控制第一个全选按钮
input1.addEventListener('click', function () {
for (var i = 0; i < input.length; i++) {
// this.checked 可以得到当前复选框的选中状态 如果是true 反之就是未选中
input[i].checked = this.checked;
input2.checked = this.checked;
}
})
//控制第二个全选按钮
input2.addEventListener('click', function () {
for (var i = 0; i < input.length; i++) {
input[i].checked = this.checked;
input1.checked = this.checked;
}
})
//
for (var i = 0; i < input.length; i++) {
input[i].onclick = function () {
var flag = true;
//每次点击，查看所有的复选框有没有被选中
for (var i = 0; i < input.length; i++) {
if (!input[i].checked) { //只要不是全选，那么就都不选
flag = false;
break; //只要有一个没有选中，剩下的没必要判断，终止语句
}
}
input1.checked = flag;
input2.checked = flag;
}
}
</script>
</body>
</html>