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

版权声明

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

---

文章目录

• 1、情景：
• 一、 gif 示意图：
• 2、代码
• 一、html 复选框
• 二、Jquery 放到页面底部

1、情景：

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

一、 gif 示意图：

---

2、代码

一、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

二、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>

---

参考文档：
一、《复选框全选与取消以及checkbox的第三种状态属性 – indeterminate》：文档很是详细生动的说明了关于复选框的问题。本篇笔记，就是参照他的博文，很是感谢做者。