脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Jquery 实现智能全选插件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 昨天早上有写到怎么利用jquery实现全选
根据大家的意见对程序中一些写法不好的地方进行了修改，也是本人水平有限，存在各种考虑不到的地方。
文章最后我提出了一个问题，要写一个通用的方法来调用，于是就有了现在的这篇文章，晚上回到家，我就写出了效果
下面的例子可以供大家讨论学习，如果觉得不错也可以直接应用到项目中。
开发过程：要实现通用就要解决2个问题，怎么分组，怎么判断组里面哪个checkbox为全选，我想了想，觉得用name分组可以，
用class来判断是否是需要全选的checkbox组。先找到所有class为需要全选的，再找出name属性，根据name属性就可以找到其他的子checkbox,只要找到元素就可以进行操作了
下面是我实现的js，保存为xs_checkbox_all.js
复制代码
//****************************************************************************************
//作者：轻狂书生
//博客地址：https://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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html XMlns="https://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script src="https://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
<p>
<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 />
</p>
</fieldset>
<fieldset>
<legend>全选two</legend>
<input type="checkbox" class="xsChk" name="chk1" />
全x2
<p>
<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 />
</p>
</fieldset>
</body>
</html>
复制代码
可以达到效果，如果有什么优化的地方，请大家提出，我会做的更好,谢谢大家了
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-Jquery 实现智能全选插件全部内容，希望文章能够帮你解决javascript代码实例教程-Jquery 实现智能全选插件所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。