Jquery代码
???????$(function () {
???????????$(":checkbox.parentfunc").click(function () {
???????????????//如何获取被点击的那个复选框
???????????????$(this).parent().parent().next().find(":checkbox").prop("checked", this.checked);
???????????});
???????????$(":checkbox:not(.parentfunc)").click(function () {
???????????????var td2 = $(this).parent().parent();
???????????????var count1 = td2.find(":checked").length; //当前选中的数量
???????????????var count2 = td2.find(":checkbox").length;//当前这个td里面有多少个复选框
???????????????if (count1 == count2) {
???????????????????td2.prev().find(":checkbox").prop("checked", true);
???????????????}
???????????????else {
???????????????????td2.prev().find(":checkbox").prop("checked", false);
???????????????}
???????????})
???????})
html代码
<body style="font-size: 12px;">
???<div class="box">
???????请编写javascript代码,完成如下功能要求:<br />
???????1.选中第一列的功能大项后,自动选中该行第二列的所有功能小项。<br />
???????2.当第二列功能小项没有全部选中时,该行第一列的复选款也要取消选中。<br />
???????<span>提示:需要使用到额外的两个方法:parent()和find()。请查看帮助自学</span>
???</div>
???<div class="box">
???????<table id="table1" class="mytable">
???????????<tr>
???????????????<td>
???????????????????<span>
???????????????????????<input type="checkbox" id="chkPromote" class="parentfunc" />图书管理
???????????????????</span>
???????????????</td>
???????????????<td>
???????????????????<span>
???????????????????????<input type="checkbox" id="Checkbox1" />新增图书管理
???????????????????</span><span>
???????????????????????<input type="checkbox" id="Checkbox2" />修改图书管理
???????????????????</span><span>
???????????????????????<input type="checkbox" id="Checkbox3" />删除图书管理
???????????????????</span>
???????????????</td>
???????????</tr>
???????????<tr>
???????????????<td>
???????????????????<span>
???????????????????????<input type="checkbox" id="Checkbox4" class="parentfunc" />会员管理
???????????????????</span>
???????????????</td>
???????????????<td>
???????????????????<span>
???????????????????????<input type="checkbox" id="Checkbox5" />新增会员管理
???????????????????</span><span>
???????????????????????<input type="checkbox" id="Checkbox6" />修改会员管理
???????????????????</span><span>
???????????????????????<input type="checkbox" id="Checkbox7" />删除会员管理
???????????????????</span>
???????????????</td>
???????????</tr>
???????????<tr>
???????????????<td>
???????????????????<span>
???????????????????????<input type="checkbox" id="Checkbox8" class="parentfunc" />系统设置
???????????????????</span>
???????????????</td>
???????????????<td>
???????????????????<span>
???????????????????????<input type="checkbox" id="Checkbox9" />管理员设置
???????????????????</span><span>
???????????????????????<input type="checkbox" id="Checkbox10" />角色管理
???????????????????</span><span>
???????????????????????<input type="checkbox" id="Checkbox11" />权限管理
???????????????????</span>
???????????????</td>
???????????</tr>
???????</table>
???</div>
</body>
Jquery复选框的全选全不选及选择所有复选框实现全选的复选框
原文地址:https://www.cnblogs.com/yunnanyanjin/p/9494240.html