<body>
<table style="border-collapse: collapse">
<tr>
<th><input type="checkbox" id="checkAll"></th>
<th>商品</th>
<th>价钱</th>
</tr>
<tr>
<td><input type="checkbox" class="ipt"></td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td><input type="checkbox" class="ipt"></td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td><input type="checkbox" class="ipt"></td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td><input type="checkbox" class="ipt"></td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</table>
<script>
var checkAll = document.getElementById('checkAll');
var checks = document.querySelectorAll('.ipt');
checkAll.onclick = function() {
for (var i = 0; i < checks.length; i++) {
checks[i].checked = this.checked;
//这里用this.checked 不能用'checked'的原因是因为
//this.checked 可以得到当前复选框的选定状态 选中是true 取消选中是false
//而用'checked'的话 checks[i].checked会一直默认被选中
//所以当全选框被选中时 checks[i].checked = "true" 所有单选框被选中
//以当全选框未选中时 checks[i].checked = "false" 所有单选框未被选中
}
}
for (var i = 0; i < checks.length; i++) {
checks[i].onclick = function() {
var flag = true;
//每次点击下面的复选框都要循环检查是否这四个小按钮是否被选中 如果一个没选中，全选框就不能选中
for (var i = 0; i < checks.length; i++) {
if (!checks[i].checked) {
flag = false;
}
}
checkAll.checked = flag;
}
}
</script>
</body>
