<!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>JQuery 分组复选框操作实例 - bind绑定事件 - www.jb200.com</title>
<style type="text/css">
#main{width:560px;margin:100px auto;padding:10px;background-color:gold;text-align:center;}
fieldset{width:500px;margin:10px;auto;}
span{margin-left:10px;}
</style>
<script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//需求
//1.分组复选框"客户管理"，选择时要全选和全清进行切换
//2.当下面的所有子复选框都选择的时候,分组复选框"客户管理"要自动勾选,如果全部没选择的时候，要自动不勾选
$(function () {
//动态绑定方法，代码精简
$("#gKhgl").bind("click", { "groupName": "khgl", "aa": "hhh" }, GroupCheck);
$(":checkbox[name='khgl']").bind("click", { "groupName": "khgl", "groupID": "gKhgl" }, ChildCheck);
$("#gRpt").bind("click", { "groupName": "rpt" }, GroupCheck);
$(":checkbox[name='rpt']").bind("click", { "groupName": "rpt", "groupID": "gRpt" }, ChildCheck);
});
function GroupCheck(event) {
//alert(event.data.aa);
var $checks = $(":checkbox[name='" + event.data.groupName + "']");
$checks.attr("checked", $(this).attr("checked"));
}
function ChildCheck(event) {
var $checks = $(":checkbox[name='" + event.data.groupName + "']");
var gChecked = false;
$checks.each(function (index, item) {
if (item.checked == true) {
gChecked = true;
}
});
$("#"+event.data.groupID).attr("checked", gChecked);
}
</script>
</head>
<body>
<div id="main">
<fieldset>
<legend><input type="checkbox" id="gKhgl" />客户管理</legend>
<span><input type="checkbox" name='khgl' id="khbf" />客户拜访</span>
<span><input type="checkbox" name='khgl' id="lxrlb" />联系人列表</span>
<span><input type="checkbox" name='khgl' id="lxjllb" />联系记录列表</span>
<span><input type="checkbox" name='khgl' id="khccsz" />客户查重设置</span>
</fieldset>
<fieldset>
<legend><input type="checkbox" id="gRpt" />报表与分析</legend>
<span><input type="checkbox" name='rpt' id="khflfx" />客户分类分析</span>
<span><input type="checkbox" name='rpt' id="cwbb" />财务报表</span>
<span><input type="checkbox" name='rpt' id="yjbb" />业绩报表</span>
</fieldset>
</div>
</body>
</html>