版权声明
本博文首发于:
CSDN 瑾兰 (https://blog.csdn.net/qq_28296925) 博客。
请注意:
无需授权即可转载;
甚至无需保留以上版权声明… …
一、情景:
- 【全选/取消按钮】点击全选后,下面的子复选框全部选中。
- 【全选/取消按钮】点击取消全选后,下面的子复选框全部取消选中。
- 当所有【子复选框按钮】点击选中后,【全选/取消按钮】自动勾选为选中状态。
- 当某个【子复选框按钮】点击取消选中后,【全选/取消按钮】自动取消勾选状态。
1、 gif 示意图:
二、代码
1、html 复选框
<table>
<thead>
<tr>
<th>序号<input type="checkbox" class="loginName" id="all"></th>
<th>员工号</th>
<th>用户名称</th>
</tr>
</thead>
<tbody id="checklist">
<g:each in="${users}" var="user" status="index">
<tr class='table-c' userId="${user.id}" userName="${user.name}">
<td>${index + 1}
<input type="checkbox" name="loginName" class="loginName" value="${user.id}" >
</td>
<td>${user.loginName}</td>
<td>${user.name}</td>
</tr>
</g:each>
</tbody>
</table>
注意:全选框ID:all ; 子复选框最外层的ID 为:chekclist
2、Jquery 放到页面底部
<script>
$(function(){
/*全选按钮状态显示判断*/
$("#checklist").find("input[type='checkbox']").click(function(){
/*初始化选择为TURE*/
$("#all")[0].checked = true;
/*获取未选中的*/
var nocheckedList = new Array();
$("#checklist").find('input:not(:checked)').each(function() {
nocheckedList.push($(this).val());
});
/*状态显示*/
if (nocheckedList.length == $("#checklist").find('input').length) {
$("#all")[0].checked = false;
}else if(nocheckedList.length ==0){
$("#all")[0].checked = true;
}else if(nocheckedList.length){
$("#all")[0].checked = false;
}
});
// 全选/取消
$("#all").click(function(){
// alert(this.checked);
if ($(this).is(':checked')) {
$("#checklist").find('input').each(function(){
$(this).prop("checked",true);
});
} else {
$("#checklist").find('input').each(function(){
$(this).removeAttr("checked",false);
// 根据官方的建议:具有 true 和 false 两个属性的属性,
// 如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()
$(this).prop("checked",false);
});
}
});
});
</script>
参考文档:
1、《复选框全选与取消以及checkbox的第三种状态属性 – indeterminate》:文档非常详细生动的说明了关于复选框的问题。本篇笔记,就是参照他的博文,非常感谢作者。