效果展示：
代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
/* background-color: red; */
width: 250px;
margin: 0px auto;
}
table {
width: 100%;
text-align: center;
border-collapse: collapse;
}
thead tr {
background-color: skyblue;
}
table tr td {
border: 1px solid gray;
}
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<td><input type="checkbox" name="selectes" id="selectAll"></td>
<td>商品</td>
<td>价钱</td>
</tr>
</thead>
<tbody id="multiples">
<tr>
<td><input type="checkbox" name="selectes"></td>
<td>iphone8</td>
<td>8000</td>
</tr>
<tr>
<td><input type="checkbox" name="selectes"></td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td><input type="checkbox" name="selectes"></td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td><input type="checkbox" name="selectes"></td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
<script>
//获取全部商品复选框按钮对象元素
var selectAllTag = document.querySelector('#selectAll');
//获取下面单个复选框的元素对象集合
var multipleSelect = document.querySelector('#multiples').querySelectorAll('input');
//全选按钮事件，当全选按钮勾选下面都勾选，全选按钮取消，下面按钮也跟着取消勾选
selectAllTag.onclick = function() {
for (var i = 0; i < multipleSelect.length; i++) {
multipleSelect[i].checked = this.checked;
}
}
//单选按钮都勾选，则全选按钮自动勾选，如有一个没勾选，全选按钮都不会自动勾选
for (var i = 0; i < multipleSelect.length; i++) {
multipleSelect[i].onclick = function() {
var flag = true; //用来标记单选按钮是否都被选中
for (var i=0;i<multipleSelect.length;i++) {
if (multipleSelect[i].checked==false) {
flag = false;
}
}
selectAllTag.checked = flag;
}
}
</script>
</body>
</html>