<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
table {
font-size: 14px;
text-align: center;
/* 字体居中 */
border-collapse: collapse;
/* 合并边框 */
border: 1px solid #ccc;
}
table thead {
background-color: aquamarine;
}
</style>
</head>
<body>
<div>
<table>
<!-- 表头部分 -->
<thead>
<tr>
<th><input type="checkbox" id="j_cbAll" /></th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<!-- 内容部分 -->
<tbody id="j_tb">
<tr>
<td><input type="checkbox" /></td>
<td>iphone8</td>
<td>5000</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>iphone8</td>
<td>5000</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>iphone8</td>
<td>5000</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>iphone8</td>
<td>5000</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>iphone8</td>
<td>5000</td>
</tr>
</tbody>
</table>
</div>
<script>
// 获取元素
var j_cbAll = document.getElementById("j_cbAll");
var j_tbs = document.getElementById("j_tb").getElementsByTagName("input");
// 注册事件
j_cbAll.onclick = function () {
// 首先获得j_cbAll的复选框状态，然后下面table的复选框就复制thead的
console.log(this.checked);
// 全选和取消全选都是遍历使得下面的每一个都和上面一样的状态，所以循环
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
};
// 下面的复选框需要全部选中，上面全选框才会勾选。
// 这个时候需要一个变量flag
//循环注册事件
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function () {
var flag = true;
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
break;
}
}
j_cbAll.checked = flag;
};
}
</script>
</body>
</html>
