提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Jquery实现checkbox全选方法

jQuery方法 实现 checkbox 全选
2023-06-13 09:15:42 时间

昨天早上有写到怎么利用Jquery实现全选

根据大家的意见对程序中一些写法不好的地方进行了修改，也是本人水平有限，存在各种考虑不到的地方。

文章最后我提出了一个问题，要写一个通用的方法来调用，于是就有了现在的这篇文章，晚上回到家，我就写出了效果

下面的例子可以供大家讨论学习，如果觉得不错也可以直接应用到项目中。

1：为什么要写这个方法

  网上实现一句话全选全不选的有很多，但是好像都忽略了一个问题，全选的checkbox可以控制下面的子checkbox，但是下面的子checkbox应该也可以控制上面的全选，这样就有了我的这个方法。

2：开发过程：要实现通用就要解决2个问题，怎么分组，怎么判断组里面哪个checkbox为全选，我想了想，觉得用name分组可以，

用class来判断是否是需要全选的checkbox组。先找到所有class为需要全选的，再找出name属性，根据name属性就可以找到其他的子checkbox,只要找到元素就可以进行操作了

3：文件，下面是我实现的js，保存为xs_checkbox_all.js

复制代码代码如下:


$(document).ready(function(){
   varxsChk="xsChk";//定义的样式
   varxsChkAll="input[type="checkbox"][class=""+xsChk+""][name]";//所有定义此样式的checkbox
   $(xsChkAll).each(function(){
       varname=$(this).attr("name");
       name="input[type="checkbox"][class!=""+xsChk+""][name=""+name+""]";//此全选框下面的子checkbox
       $(this).click(function(){
           $(name).attr("checked",$(this)[0].checked);
       })
       varxschk=$(this);
       $(name).click(function(){
           varIAll=$(name).length;//此子项目下所有checkbox的个数
           varIChk=$(name+":checked").length;//此子项目下所有勾选checkbox的个数
           varisAllChecked=true;//是否是全选
           if(IAll!=IChk){
               isAllChecked=false;
           }
           $(xschk).attr("checked",isAllChecked);
       });
   });
});

页面使用

复制代码代码如下:


<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
</head>
<body>
   <scriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"type="text/javascript">
   </script>
   <scriptsrc="xs_checkbox_all.js"type="text/javascript"></script>
   <fieldset>
       <legend>全选one</legend>
       <inputtype="checkbox"class="xsChk"name="chk"/>
       全选
   <div>
       <inputtype="checkbox"name="chk"/>
       1<br/>
       <inputtype="checkbox"name="chk"/>
       2<br/>
       <inputtype="checkbox"name="chk"/>
       3<br/>
       <inputtype="checkbox"name="chk"/>
       4<br/>
   </div>
   </fieldset>
   <fieldset>
       <legend>全选two</legend>
       <inputtype="checkbox"class="xsChk"name="chk1"/>
       全选2
   <div>
       <inputtype="checkbox"name="chk1"/>
       11<br/>
       <inputtype="checkbox"name="chk1"/>
       22<br/>
       <inputtype="checkbox"name="chk1"/>
       33<br/>
       <inputtype="checkbox"name="chk1"/>
       44<br/>
   </div>
   </fieldset>
</body>
</html>

可以达到效果，如果有什么优化的地方，请大家提出，我会做的更好,谢谢大家了，以上就是本文的全部内容了，希望大家能够喜欢。

相关文章