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复选框的全选全不选及选择所有复选框实现全选的复选框的更多相关文章

  1. Vim 的补全模式加速器，轻松玩转全部 15 种自动补全模式

    1. 关于 Vim 补全模式    ---- Vim 一共提供了 15 种自动补全的模式(:help ins-completion).其中有两种的补全列表内容与另外两种相同,只是排序不同,这 15 种 ...

  2. 转: 如何选CDN：互联网大直播时代的CDN选择指南

    from:  http://www.chnvideo.com/blog-classic-cdn.html SRS 编码器   如何选CDN:互联网大直播时代的CDN选择指南 CDN是一个服务型的公司, ...

  3. 如何选CDN：互联网大直播时代的CDN选择指南

    转: 如何选CDN:互联网大直播时代的CDN选择指南 from:  http://www.chnvideo.com/blog-classic-cdn.html SRS 编码器   如何选CDN:互联网 ...

  4. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  5. swift - 全屏imageView的适配 - UIViewContentMode选择

    1. /// 设置当前图片view大小 func setFrame(){ if #available(iOS 11.0, *) { if let y = JY_WINDOW?.safeAreaInse ...

  6. 【微软大法好】VS Tools for AI全攻略（4）——选择适合自己的虚拟机

    当我们选择好了自己的虚拟机后,也许效果不尽如人意.就比如我,发现代码在训练一段时间之后,CPU的使用率会下降. 这个时候我们就要开始考虑,是不是我们选择的虚拟机不是适合自己的型号. Azure的虚拟机 ...

  7. Go 开发关键技术指南 | 为什么你要选择 GO？（内含超全知识大图）

    作者 | 杨成立(忘篱) 阿里巴巴高级技术专家 关注"阿里巴巴云原生"公众号,回复 Go 即可查看清晰知识大图! 导读:从问题本身出发,不局限于 Go 语言,探讨服务器中常常遇到的 ...

  8. Jquery 插件开发——citylinkage（省、市、县城市联动选择）

    第一部分:背景  开发源于需求,本次城市联动选择插件算是我写插件的一个特例吧,不是我目前工作需要些的,算是兴趣驱使吧.之前呢,一直想写这个插件,然后错过了一个写这个插件的机会(这个得回顾到很久以前了. ...

  9. jQuery Autocomplete 用户快速找到并从预设值列表中选择

    jQuery Autocomplete 插件根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择.通过给 Autocomplete 字段焦点或者在其中输入字符,插件开始搜索匹配的条目并显示 ...

  10. JQuery/JS select标签动态设置选中值、设置禁止选择 button按钮禁止点击 select获取选中值

    //**1.设置选中值:(根据索引确定选中值)**// var osel=document.getElementById("selID"); //得到select的ID var o ...

随机推荐

  1. gulp 前端构建工具入门

    gulp 前端构建工具入门 标签(空格分隔): gulp 1. 安装gulp npm i -g gulp 2. 创建gulp项目 2.1 Hello world 使用npm init初始化项目文件夹. ...

  2. 二叉树的二叉链表存储结构及C++实现

    前言:存储二叉树的关键是如何表示结点之间的逻辑关系,也就是双亲和孩子之间的关系.在具体应用中,可能要求从任一结点能直接访问到它的孩子. 一.二叉链表 二叉树一般多采用二叉链表(binary linke ...

  3. Ubuntu下python的第三方module无法在pycharm中导入

    换了台笔记本,新安装的requests module无法在pycharm导入: Traceback (most recent call last): File "/home/winsterc ...

  4. vsphere的P2V工具做的物理机迁移到虚拟机报错out of memory

     vsphere的P2V工具做的物理机迁移到虚拟机  迁移成功,但是启动报错  进入rescue模式后发现是sysctl.conf文件的参数设大了因为虚拟机的内存没有物理机内存大 kernel.shm ...

  5. 【zz】史上最全设计模式导学目录（完整版）

    2012年-2013年,Sunny在CSDN技术博客中陆续发表了100多篇与设计模式学习相关的文章,涵盖了七个面向对象设计原则和24个设计模式(23个GoF设计模式 +  简单工厂模式),为了方便大家 ...

  6. July 18th 2017 Week 29th Tuesday

    My heart is stronger now that you are in it. 我的心里有了你,从此变得更强大. You will no longer feel lonely if ther ...

  7. 科普文：从人人网看网络科学（Network Science）的X个经典问题

    转:https://zr9558.wordpress.com/2013/12/05/科普文:从人人网看网络科学(network-science)的x个经典问/ 长文,写了N个小时写完的.你肯定能看懂, ...

  8. Kubernetes pod里一个特殊的容器：pause-amd64

    大家在使用Docker容器或者Kubernetes时,遇到过这个容器么?gcr.io/google_containers/pause-amd64 docker ps的命令返回的结果: [root@k8 ...

  9. 异常：Neither BindingResult nor plain target object for bean name 'command' available as request attribute

    Neither BindingResult nor plain target object for bean name 'command' available as request attribute ...

  10. springMvc返回Json中自定义日期格式

    (一)输出json数据 springmvc中使用jackson-mapper-asl即可进行json输出,在配置上有几点: 1.使用mvc:annotation-driven 2.在依赖管理中添加ja ...