<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<input id="all" type="checkbox"/>全选
<hr />
<div>
<input type="checkbox" class="box"/>
<br/>
<input type="checkbox" class="box"/>
<br/>
<input type="checkbox" class="box"/>
<br/>
<input type="checkbox" class="box"/>
<br/>
</div>
</body>
<script type="text/javascript">
window.onload = function (){
var all = document.getElementById ("all"); //全选checkbox
var box = document.getElementsByClassName('box'); //子复选框
//遍历checkbox，把子复选框的checked设置成全选框的状态，实现全选/全不选
all.onclick = function (){
for ( var i = 0; i < box.length; i++){
box[i].checked = this.checked;
}
};
//遍历checkbox，子复选框有一个未选中时，如果全选框设为false不选状态
for ( var i = 0; i < box.length; i++){
box[i].onclick = function (){
if ( !this.checked ){
all.checked = false;
}
};
}
}
</script>
</html>
