码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-08-17 17:15:01      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:false   not   checkbox   获取   size   NPU   color   没有   style   

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复选框的全选全不选及选择所有复选框实现全选的复选框

标签:false   not   checkbox   获取   size   NPU   color   没有   style   

原文地址:https://www.cnblogs.com/yunnanyanjin/p/9494240.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!