表格结构:
1.HTML代码
<body>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<table id="tb" class="table table-bordered table-hover">
<tr class="active">
<th> <input type="checkbox" class="box1" /> </th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr class="success">
<td class="in"> <input type="checkbox" class="box" /> </td>
<td class="name">陈涛</td>
<td class="age">18</td>
<td><a href="#" class="del">删除内容</a> <a href="#" class="update">修改内容</a> <a href="#" class="delete">刪除整行</a></td>
</tr>
<tr class="warning">
<td class="in"> <input type="checkbox" class="box" /> </td>
<td class="name">李杨</td>
<td class="age">19</td>
<td> <a href="#" class="del">删除内容</a> <a href="#" class="update">修改内容</a> <a href="#" class="delete">刪除整行</a> </td>
</tr>
<tr class="danger">
<td class="in"> <input type="checkbox" class="box" /> </td>
<td class="name">王虎</td>
<td class="age">20</td>
<td><a href="#" class="del">删除内容</a> <a href="#" class="update">修改内容</a> <a href="#" class="delete">刪除整行</a></td>
</tr>
<tr class="info">
<td class="in"> <input type="checkbox" class="box" /> </td>
<td class="name">徐飘</td>
<td class="age">20</td>
<td><a href="#" class="del">删除内容</a> <a href="#" class="update">修改内容</a> <a href="#" class="delete">刪除整行</a></td>
</tr>
<div >
<tr class="active" id="btn">
<td>选项</td>
<td> <input type="button" id="btn4" value="查询" /></td>
<td> <input type="button" id="btn0" value="添加" /></td>
<td>
<input type="button" id="btn1" value="全选" />
<input type="button" id="btn2" value="反选" />
<input type="button" id="btn3" value="全不选" />
</td>
</tr>
</div>
</table>
</div>
</div>
</body>
2. 页面效果
主要功能有:
点击全选,所有checkbox的状态为:checked属性为false;
点击全不选,所有checkbox的状态为:checked属性为true;
点击反选,checkbox的状态取反,而且需要单独判断,最上面的checkbox,
点击最上面的checkbox,下面的checkbox全选或者全不选。
3.事件绑定
3.1 全选事件
$("#btn1").on("click", function() {
$("input[type='checkbox']").prop("checked", true);
});
3.2 全不选事件
$("#btn3").on("click", function() {
$("input[type='checkbox']").prop("checked", false);
});
3.3 反选事件
$("#btn2").on("click", function() {
var boxs = $(".box");
var box1 = $(".box1");
for (var i = 0; i < boxs.length; i++) {
if (boxs[i].checked == false) {
boxs[i].checked = true;
} else {
boxs[i].checked = false;
}
};
if ($(".box:checked").length == $(".box").length) {
// console.log(box1[0].checked);
if (box1[0].checked == false) {
box1.prop("checked", true);
} else {
box1.prop("checked", false);
}
} else {
box1.prop("checked", false);
}
});
3.4 box1事件
$(".box1").on("click", function() {
var boxs = $(".box");
if ($(".box1")[0].checked == true) {
for (var i = 0; i < boxs.length; i++) {
boxs[i].checked = true;
}
} else {
for (var i = 0; i < boxs.length; i++) {
boxs[i].checked = false;
}
}
});
3.5 点击下面每个box,当全部选择时,box1为选择状态
var boxs = $(".box");
boxs.on("click", function() {
var box1 = $(".box1");
var count = 0;
for (var i = 0; i < boxs.length; i++) {
if (boxs[i].checked == true) {
count = count + 1;
// console.log(count);
}
if (count == boxs.length) {
box1.prop("checked", true);
} else {
box1.prop("checked", false);
}
};
});
删除,修改,增加功能见下一篇文章链接
https://blog.csdn.net/weixin_44129913/article/details/101602985