<!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>
本文修改于博客园里一个案例，现在找不到这遍文章的地址，特此说明！
时间： 2024-10-16 16:29:32