<!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');
// add an event to the whole box
inp.onclick = function() {
// Loop 4 small box, make 4 small checkbox checked state and consistent whole box
for (var i = 0; i < inps.length; i++) {
inps[i].checked = this.checked;
}
}
// to every little box below to add click event
for (var i = 0; i < inps.length; i++) {
inps[i].onclick = function() {
// flag controls whether the Select All button Select All
was flag = true;
// determine whether each button is selected
for (var i = 0; i < inps.length; i++) {
// the presence of a button is not selected, flag = flase; otherwise flag = true;
if (!inps[i].checked) {
flag = false;
break;
}
}
inp.checked = flag;
}
}
</script>
</body>
</html>