分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

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

发布时间:2023-09-06 02:10责任编辑:林大明关键词:暂无标签

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved