当前位置:主页 > 站长学院 > 网页设计 >

复选框表单使用jquery实现全选与取消全选的功能

YouYou 发布于 2019-08-11
频道:网页设计

复选框表单使用jquery实现全选与取消全选的功能,该功能主要实现以下功能:

【全选/取消】点击全选框后,下面的子复选框全部选中。取消全选框勾选后,下面的子复选框全部取消选中。

当所有子复选框均被选中后,全选框自动勾选为选中状态。当某个子复选框被取消选中后,全选框自动取消勾选状态。

实现的效果如下图:

复选框表单使用jquery实现全选与取消全选的功能

实现步骤与代码如下:

1.首先是Html代码,以下一个示例HTML,可以按自己的需求修改,这里要注意的是:全选框ID:all ; 子复选框最外层的ID 为:chekclist。

  1. <table> 
  2.  <thead> 
  3.      <tr> 
  4.         <th>序号<input type="checkbox" class="loginName" id="all"></th> 
  5.         <th>员工号</th> 
  6.         <th>用户名称</th> 
  7.     </tr> 
  8. </thead> 
  9. <tbody id="checklist"
  10.    <g:each in="${users}" var="user" status="index"
  11.           <tr class='table-c' userId="${user.id}" userName="${user.name}"
  12.                 <td>${index + 1} 
  13.                      <input type="checkbox" name="loginName" class="loginName"  value="${user.id}" > 
  14.                 </td> 
  15.                 <td>${user.loginName}</td> 
  16.                 <td>${user.name}</td> 
  17.           </tr> 
  18.    </g:each> 
  19. </tbody> 
  20. </table> 

2.然后在页面底部加入以下JS代码,在加入之前,Jquery.js记得引入,这里没写。自己开发的时候在以下代码之前引入一次Jquery即可。

  1. <script> 
  2. $(function(){ 
  3.           /*全选按钮状态显示判断*/ 
  4.       $("#checklist").find("input[type='checkbox']").click(function(){ 
  5.            /*初始化选择为TURE*/ 
  6.            $("#all")[0].checked = true; 
  7.            /*获取未选中的*/ 
  8.            var nocheckedList = new Array(); 
  9.            $("#checklist").find('input:not(:checked)').each(function() { 
  10.                nocheckedList.push($(this).val()); 
  11.            }); 
  12.            /*状态显示*/ 
  13.            if (nocheckedList.length == $("#checklist").find('input').length) { 
  14.                $("#all")[0].checked = false; 
  15.            }else if(nocheckedList.length ==0){ 
  16.                $("#all")[0].checked = true; 
  17.            }else if(nocheckedList.length){ 
  18.                $("#all")[0].checked = false; 
  19.            } 
  20.      }); 
  21.      // 全选/取消 
  22.     $("#all").click(function(){ 
  23.        // alert(this.checked); 
  24.         if ($(this).is(':checked')) { 
  25.                $("#checklist").find('input').each(function(){ 
  26.                     $(this).prop("checked",true); 
  27.                }); 
  28.          } else { 
  29.               $("#checklist").find('input').each(function(){ 
  30.                     $(this).removeAttr("checked",false); 
  31.                     // 根据官方的建议:具有 true 和 false 两个属性的属性, 
  32.                     // 如 checked, selected 或者 disabled 使用prop(),其他的使用 attr() 
  33.                     $(this).prop("checked",false); 
  34.               }); 
  35.          } 
  36.    }); 
  37. }); 
  38. </script> 

以上就是复选框表单使用jquery实现全选与取消全选的功能的步骤和代码。

相关文章
×
QQ在线客服

服务中心

zfzf