<!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>
<style>
#box {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</div>
</head>
<body>
<input type="checkbox" name="box1" id="box">全选<br>
<input type="checkbox" name="box2">影视<br>
<input type="checkbox" name="box2">体育<br>
<input type="checkbox" name="box2">游戏<br>
<input type="checkbox" name="box2">nba<br>
<input type="checkbox" name="box2">新闻列表<br>
<input type="checkbox" name="box2">美食<br>
<input type="checkbox" name="box2">生活<br>
<input type="checkbox" name="box2">家居<br>
<input type="checkbox" name="box2">二次元<br>
<input type="checkbox" name="box2">娱乐<br>
</body>
</html>
<script>
var box1 = document.getElementsByName('box1');
var box2 = document.getElementsByName('box2');
var box = document.getElementById('box');
box.focus();
box1[0].onclick = function () {
var ischecked = this.checked;
for (var i = 0; i < box2.length; i++) {
box2[i].checked = ischecked;
}
}
for (var i = 0; i < box2.length; i++) {
box2[i].onclick = function () {
var ischecked = true;
for (var j = 0; j < box2.length; j++) {
if (box2[j].checked === false) {
ischecked = false;
break;
}
}
if (ischecked) {
box1[0].checked = true;
} else {
box1[0].checked = false;
}
}
}
</script>