复选框的子级和父级间的逻辑

a.父级选中 子级都选中

b.子级一个选中 父级就选中

c.全选或者全部选中

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 

<script type="text/javascript">
$(function(){
$("#checkedAll").click(function(){
var flag = this.checked;
$(":checkbox[name='items']").attr("checked", flag);
});

$(":checkbox[name='items']").click(function(){
var _cbClass = $(this).attr('class'); //获取父级的class元素
if(_cbClass){//判断是否有元素,有的话则是父级复选框
var _isChecked = $(this).is(":checked"); //获取是否选中
$(":checkbox[pid='"+_cbClass+"']").attr("checked",_isChecked);//根据父级是否选中的状态设置子级的状态
}else{//操作子级复选框
var _pid = $(this).attr('pid');//获取pid的值
if($("input[pid="+_pid+"]").is(":checked")==true){
$(":checkbox[class='"+_pid+"']").attr("checked",true);//判断子级是否有选中,有的话父级选中
}else{
$(":checkbox[class='"+_pid+"']").attr("checked",false);
}
}

});


});

</script>

html部分:

<body>

<form method="post" action="">
<div style="margin-left:30px;">权限设置
<input type="checkbox" id="checkedAll" />全选/全不选
<div style="border:solid 1px #ebebeb; padding-left:70px; padding-top:20px; margin-top:15px;">

<input type="checkbox" name="items" class="id_1"/><span style="font-size:18px; color:#36F;">广州</span>
<ul>
<li><input type="checkbox" name="items" pid="id_1"/>白云区</li>
<li><input type="checkbox" name="items" pid="id_1"/>越秀区</li>

</ul>


<input type="checkbox"name="items" class="id_2" /><span style="font-size:18px; color:#36F;">北京</span>
<ul>
<li><input type="checkbox" name="items" pid="id_2"/>白云区</li>
<li><input type="checkbox" name="items" pid="id_2"/>白云区</li>
</ul>
</div>
</div>
</form>

</body>

原文地址:https://www.cnblogs.com/hFannie/p/4565532.html