Jquery 实现checkbox全选方法
最近在写一个jquery实现checkbox全选的功能，在网上找了一些案例效果，感觉这个还可以，相对比较简单，就可以实现这个效果，所以就收藏一下。
可以实现同一个页面，多个全选的效果。
实现效果
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<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>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(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);
});
});
});
</script>
</body>
</html>大家还有其他比较好的实现这个功能的，可以作为交流。
本文作者： Liaodeity
本文链接： https://www.jianbaizhan.com/article/322
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！