<!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>
table {
border-collapse: collapse;
}
table th,
td {
border: 1px solid #ccc;
background-color: royalblue;
width: 100px;
height: 26px;
color: #fff;
}
table td {
background: #eee;
color: #333;
}
table td:first-child {
text-align: center;
}
</style>
</head>
<body>
<table cellpadding="5" cellspacing="0">
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll">
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody class="j_cb">
<tr>
<td><input type="checkbox"></td>
<td>iphone 8</td>
<td>8000</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>iphone 7</td>
<td>5000</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>iphone 6</td>
<td>3000</td>
</tr>
</tbody>
</table>
<script>
//获取元素
var j_cbAll = document.querySelector('#j_cbAll');
var j_tbs = document.querySelector('.j_cb').querySelectorAll('input');
//绑定事件
j_cbAll.onclick = function() {
for (var i = 0; i < j_tbs.length; i++) {
//this.checked 可以得到当前复选框的选中状态如果是true则代表选中,false则未选中
j_tbs[i].checked = this.checked;
}
}
//下面复选框全部选中,上面的才能选中:给下面所有的复选框绑定点击事件,每次点击均循环查看下面的复选框是否都已选中,如果没有都选中,上面全选则不选
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function() {
//flag 控制全选按钮是否选中
var flag = true;
//每次点击下面的复选框都循环检查是否全被选中
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
break; //退出for循环,可以提高执行效力,因为有一个没有选中,剩下的就无需循环
}
}
j_cbAll.checked = flag;
}
}
</script>
</body>
</html>