<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="checkbox">全选
<div class="box">
<input type="checkbox">1 <br>
<input type="checkbox">2 <br>
<input type="checkbox">3 <br>
<input type="checkbox">4 <br>
</div>
<script>
var inp = document.querySelector(‘input‘);
var inps = document.querySelector(‘.box‘).querySelectorAll(‘input‘);
//给全选框添加事件
inp.onclick = function() {
//循环4个小复选框，让4个小复选框的checked状态和全选框保持一致
for (var i = 0; i < inps.length; i++) {
inps[i].checked = this.checked;
}
}
//给下面的每一个小复选框添加点击事件
for (var i = 0; i < inps.length; i++) {
inps[i].onclick = function() {
//flag 控制全选按钮是否全部选中
var flag = true;
// 判断每个按钮是否被选中
for (var i = 0; i < inps.length; i++) {
//存在某个按钮没有被选中的情况，flag=flase;否则flag=true;
if (!inps[i].checked) {
flag = false;
break;
}
}
inp.checked = flag;
}
}
</script>
</body>
</html>
