Jquery 实现checkbox全选方法
更新时间：2015年01月28日 10:26:39 投稿：hebedich
本文主要向大家展示了一段使用jQuery实现checkbox全选的方法，以及编写此方法的背景和过程，非常详细，这里推荐给小伙伴们。
昨天早上有写到怎么利用Jquery实现全选
根据大家的意见对程序中一些写法不好的地方进行了修改，也是本人水平有限，存在各种考虑不到的地方。
文章最后我提出了一个问题，要写一个通用的方法来调用，于是就有了现在的这篇文章，晚上回到家，我就写出了效果
下面的例子可以供大家讨论学习，如果觉得不错也可以直接应用到项目中。
1：为什么要写这个方法
网上实现一句话全选全不选的有很多，但是好像都忽略了一个问题，全选的checkbox可以控制下面的子checkbox，但是下面的子checkbox应该也可以控制上面的全选，这样就有了我的这个方法。
2：开发过程：要实现通用就要解决2个问题，怎么分组，怎么判断组里面哪个checkbox为全选，我想了想，觉得用name分组可以，
用class来判断是否是需要全选的checkbox组。先找到所有class为需要全选的，再找出name属性，根据name属性就可以找到其他的子checkbox,只要找到元素就可以进行操作了
3：文件，下面是我实现的js，保存为xs_checkbox_all.js
复制代码 代码如下:
$(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" />
全选
<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" />
全选2
<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>
可以达到效果，如果有什么优化的地方，请大家提出，我会做的更好,谢谢大家了，以上就是本文的全部内容了，希望大家能够喜欢。
相关文章
我想做一个可以动态添加删除div的功能。中间遇到一个问题，最后在网友的热心帮助下解决了，使用到的jquery方法和思想就是：事件的绑定和销毁(unbind)2015-08-08
这篇文章主要介绍了基于JQuery实现滚动到页面底端时自动加载更多信息，类似微博，新浪新闻的评论等，都采用了这方法,需要的朋友可以参考下2014-01-01
这篇文章主要为大家详细介绍了基于jQuery实现简单人工智能聊天室的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要介绍了基于jquery实现省市区三级联动效果,需要的朋友可以参考下2015-12-12
下面小编就为大家带来一篇jQuery获取this当前对象子元素对象的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
页面上经常会有弹窗，有的弹窗是动态生成的，有的弹窗是在页面底部隐藏的，对于动态生成的弹窗，如果要监听弹窗的事件，可以使用jQuery的事件绑定on()方法实现2016-04-04
下面小编就为大家带来一篇jQuery的Cookie封装,与PHP交互的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要介绍了jQuery复合事件用法,结合具体实例形式分析了jQuery复合事件的简单定义与使用方法,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了jQuery对象与DOM对象的转换方法,结合实例形式分析了jQuery对象及DOM对象的作用与二者的相互转换技巧,需要的朋友可以参考下2016-05-05
本文介绍一个treepanel动态加载数据的例子，需要了解的朋友可以参考下2012-12-12
最新评论