Jquery复选框的全选全不选及选择所有复选框实现全选的复选框

最新推荐文章于 2019-11-29 10:04:15 发布

baicong9362

最新推荐文章于 2019-11-29 10:04:15 发布

阅读量217

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yunnanyanjin/p/9494240.html

版权

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>