您的位置：首页 > Web前端 > JQuery

Jquery中对checkbox的各种“全选”或者“取消”功能实现（特别注意1.6+的一定不能使用attr来取属性了！用prop！）

2015-01-08 09:19 971 查看

<!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>
$(document).ready(function () {
var xsChk = 'px';//定义的样式
var xsChkAll = "input[type='checkbox'][class='" + xsChk + "'][name]";//所有定义此样式的checkbox
$(xsChkAll).each(function () {
var name = $(this).prop("name");
name = "input[type='checkbox'][class!='" + xsChk + "'][name='" + name + "']";//此全选框下面的子checkbox
$(this).on('click', function () {
$(name).prop("checked", $(this)[0].checked);
})
var xschk = $(this);
$(name).on('click', function () {
var IAll = $(name).length; //此子项目下所有checkbox的个数
var IChk = $(name + ":checked").length; //此子项目下所有勾选checkbox的个数
var isAllChecked = true; //是否是全选
if (IAll != IChk) {
isAllChecked = false;
}
$(xschk).prop("checked", isAllChecked);
});
});
});

</script>

<legend>全选one</legend>
<input type="checkbox" class="xsChk" name="chk" />
全選

<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 />

<legend>全选two</legend>
<input type="checkbox" class="xsChk" name="chk1" />
全選2

<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 />

</body>
</html>

本文修改于博客园里一个案例，现在找不到这遍文章的地址，特此说明！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航