87,907
社区成员
发帖
与我相关
我的任务
分享全选/反选
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<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>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
<input type="button" value=" 反 选 " id="btn">
</div>
<script>
var j_tb = document.getElementById('j_tb');
var inputs = j_tb.getElementsByTagName('input');
// 1 全选
// 1.1 获取父checkbox，注册点击事件
var j_cbAll = document.getElementById('j_cbAll');
j_cbAll.onclick = function () {
// 1.2 找到所有子的checkbox，让这些checkbox的状态跟父checkbox保持一致
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'checkbox') {
// 让子的checkbox的选中状态，和父checkbox的选中状态一致
input.checked = this.checked;
}
}
}
// 2 当点击子的checkbox，如果所有的子的checkbox都被选中了，让父的checkbox也选中
// 如果有一个子的checkbox没有被选中，父的checkbox也不被选中
// 此处的循环，是遍历所有子的checkbox，注册点击事件
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 判断是否是checkbox
if (input.type !== 'checkbox') {
// 结束当前循环，继续下一次循环
continue;
}
// 给子的checkbox注册点击事件
input.onclick = function () {
checkAllCheckBox();
}
}
// 3 反选
// 3.1 给反选按钮注册点击事件
var btn = document.getElementById('btn');
btn.onclick = function () {
// 3.2 找到所有的子的checkbox，让其反选
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 判断是否是checkbox
if (input.type !== 'checkbox') {
continue;
}
// 让子的checkbox反选
input.checked = !input.checked;
// 设置父的checkbox的状态
checkAllCheckBox();
}
}
// 判断父的checkbox的状态 封装成函数
function checkAllCheckBox() {
// 假设所有的子的checkbox都被选中了
var isAllChecked = true;
// 判断是否所有的子的checkbox都被选中了
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type !== 'checkbox') {
continue;
}
// 判断当前的所有checkbox是否都被选中
if (!input.checked) {
isAllChecked = false;
}
}
// 设置父的checkbox的状态
j_cbAll.checked = isAllChecked;
}
</script>
</body>
</html>
...全文
请发表友善的回复…
发表回复
