JQuery 分组复选框操作(使用了bind绑定事件)

最新推荐文章于 2024-01-12 13:58:23 发布

永远爱好写程序

最新推荐文章于 2024-01-12 13:58:23 发布

阅读量5.6k

点赞数

分类专栏： Jquery_高级

本文链接：https://blog.csdn.net/limlimlim/article/details/9241465

版权

Jquery_高级专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

永远爱好写程序

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 分组复选框操作(使用了bind绑定事件)

#main{width:560px;margin:100px auto;padding:10px;background-color:gold;text-align:center;} fieldset{width:500px;margin:10px;auto;} span{margin-left:10px;}
复制链接

扫一扫

专栏目录