[复选框] 全选、取消全选、自动勾选或取消全选按钮

版权声明

本博文首发于：
CSDN 瑾兰 （https://blog.csdn.net/qq_28296925） 博客。
请注意：
无需授权即可转载；
甚至无需保留以上版权声明… …

---

一、情景：

1. 【全选/取消按钮】点击全选后，下面的子复选框全部选中。
2. 【全选/取消按钮】点击取消全选后，下面的子复选框全部取消选中。
3. 当所有【子复选框按钮】点击选中后，【全选/取消按钮】自动勾选为选中状态。
4. 当某个【子复选框按钮】点击取消选中后，【全选/取消按钮】自动取消勾选状态。

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》：文档非常详细生动的说明了关于复选框的问题。本篇笔记，就是参照他的博文，非常感谢作者。