根据大家的意见对程序中一些写法不好的地方进行了修改，也是本人水平有限，存在各种考虑不到的地方。
文章最后我提出了一个问题，要写一个通用的方法来调用，于是就有了现在的这篇文章，晚上回到家，我就写出了效果
下面的例子可以供大家讨论学习，如果觉得不错也可以直接应用到项目中。
开发过程：要实现通用就要解决2个问题，怎么分组，怎么判断组里面哪个checkbox为全选，我想了想，觉得用name分组可以，
用class来判断是否是需要全选的checkbox组。先找到所有class为需要全选的，再找出name属性，根据name属性就可以找到其他的子checkbox,只要找到元素就可以进行操作了
下面是我实现的js，保存为xs_checkbox_all.js
http://www.gaodaima.com/30386.html
//**************************************************************************************** //作者：轻狂书生 //博客地址：http://www.cnblogs.com/xiaoshuai1992 //create: 2014/1/15 //功能：实现checkbox的智能全选 //使用方法：引用jquery,设置要全选的checkbox 组name一样，全选的checkbox设置class为下面变量xsChk //***************************************************************************************** $(document).ready(function () { var xsChk = "xsChk";//定义的样式 var xsChkAll = "input[type='checkbox'][class='" + xsChk + "'][name]";//所有定义此样式的checkbox $(xsChkAll).each(function () { var name = $(this).attr("name"); name = "input[type='checkbox'][class!='" + xsChk + "'][name='" + name + "']";//此全选框下面的子checkbox $(this).click(function () { $(name).attr("checked", $(this)[0].checked); }) var xschk = $(this); $(name).click(function () { var IAll = $(name).length; //此子项目下所有checkbox的个数 var IChk = $(name + ":checked").length; //此子项目下所有勾选checkbox的个数 var isAllChecked = true; //是否是全选 if (IAll != IChk) { isAllChecked = false; } $(xschk).attr("checked", isAllChecked); }); }); });
页面使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript"> </script> <script src="xs_checkbox_all.js" type="text/javascript"></script> <fieldset> <legend>全选one</legend> <input type="checkbox" class="xsChk" name="chk" /> 全x <div> <input type="checkbox" name="chk" /> 1<br /> <input type="checkbox" name="chk" /> 2<br /> <input type="checkbox" name="chk" /> 3<br /> <input type="checkbox" name="chk" /> 4<br /> </div> </fieldset> <fieldset> <legend>全选two</legend> <input type="checkbox" class="xsChk" name="chk1" /> 全x2 <div> <input type="checkbox" name="chk1" /> 11<br /> <input type="checkbox" name="chk1" /> 22<br /> <input type="checkbox" name="chk1" /> 33<br /> <input type="checkbox" name="chk1" /> 44<br /> </div> </fieldset> </body> </html>
欢迎大家阅读《jquery 实现智能全选插件_js》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Jquery 实现智能全选插件_js
转载请注明原文链接：Jquery 实现智能全选插件_js
