下面是我通过学习js基础利用js简单的实现了一个小的案例包含具体的思路和代码，这里的表格没有写css样式美化。
点击父的checkbox时呈现的状态
当子的checkbox没有全部选中时，父的checkbox也改变了相应的状态
点击反选之后呈现的状态
具体代码如下：
<!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>
.gray {
color: gray;
}
</style>
</head>
<body>
<div class="warp">
<table border="1">
<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>iPhone11</td>
<td>10000</td>
</tr>
</tbody>
</table>
<input type="button" value="反选" id="btn">
</div>
<script src="common.js"></script>
<script>
// 1 点击全选按钮（父的checkbox）的时候，让子的checkbox的选中状态跟父的checkbox保持一致
//1.1 获取父checkbox注册点击事件
var j_cbAll = my$(‘j_cbAll‘);
var checkboxs = document.querySelectorAll(‘#j_tb input[type=checkbox]‘);
j_cbAll.onclick = function () {
//2.2 让子的checkbox的选中状态跟父的checkbox保持一致
//获取所有子的checkbox
var i = 0, len=checkboxs.length;
for (; i<len; i++) {
//获取每一个checkbox
var checkbox = checkboxs[i];
//让每一个checkbox的选中状态和父的checkbox保持一致
checkbox.checked = this.checked;
}
}
// 2 给所有子checkbox注册点击事件，点击子checkbox修改父的checkbox 如果有一个子的checkbox没有选中，父的checkbox也不能选中
// 2.1 给所有的checkbox注册点击事件
var i = 0, len=checkboxs.length;
for (; i<len; i++) {
var checkbox =checkboxs[i];
//注册点击事件
checkbox.onclick = function () {
//2.2 如果有一个子checkbox没有选中，父的checkbox也选不中
// 假设，所有子的checkbox都选中了
var isAllCheked = true;
for (i = 0; i<len; i++) {
//获取每一个子的checkbox
checkbox = checkboxs[i];
//判断选中状态
if(!checkbox.checked)
{
//如果checkbox没有选中 设置isAllChecked = false
isAllCheked = false;
break;
}
}
// 设置父的checkbox的选中状态
j_cbAll.checked = isAllCheked;
}
}
// 3 反选
// 3.1 给反选按钮注册点击事件
my$(‘btn‘).onclick = function () {
// 3.2 给所有子的checkbox 对选中状态进行反选
for(i = 0; i<len; i++) {
var checkbox = checkboxs[i];
//反选
checkbox.checked = !checkbox.checked;
}
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/awjbky/p/12169825.html
时间： 2024-08-30 07:32:26