Jquery复选框的全选全不选及选择所有复选框实现全选的复选框
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复选框的全选全不选及选择所有复选框实现全选的复选框的更多相关文章
- Vim 的补全模式加速器,轻松玩转全部 15 种自动补全模式
1. 关于 Vim 补全模式 ---- Vim 一共提供了 15 种自动补全的模式(:help ins-completion).其中有两种的补全列表内容与另外两种相同,只是排序不同,这 15 种 ...
- 转: 如何选CDN:互联网大直播时代的CDN选择指南
from: http://www.chnvideo.com/blog-classic-cdn.html SRS 编码器 如何选CDN:互联网大直播时代的CDN选择指南 CDN是一个服务型的公司, ...
- 如何选CDN:互联网大直播时代的CDN选择指南
转: 如何选CDN:互联网大直播时代的CDN选择指南 from: http://www.chnvideo.com/blog-classic-cdn.html SRS 编码器 如何选CDN:互联网 ...
- jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...
- swift - 全屏imageView的适配 - UIViewContentMode选择
1. /// 设置当前图片view大小 func setFrame(){ if #available(iOS 11.0, *) { if let y = JY_WINDOW?.safeAreaInse ...
- 【微软大法好】VS Tools for AI全攻略(4)——选择适合自己的虚拟机
当我们选择好了自己的虚拟机后,也许效果不尽如人意.就比如我,发现代码在训练一段时间之后,CPU的使用率会下降. 这个时候我们就要开始考虑,是不是我们选择的虚拟机不是适合自己的型号. Azure的虚拟机 ...
- Go 开发关键技术指南 | 为什么你要选择 GO?(内含超全知识大图)
作者 | 杨成立(忘篱) 阿里巴巴高级技术专家 关注"阿里巴巴云原生"公众号,回复 Go 即可查看清晰知识大图! 导读:从问题本身出发,不局限于 Go 语言,探讨服务器中常常遇到的 ...
- Jquery 插件开发——citylinkage(省、市、县城市联动选择)
第一部分:背景 开发源于需求,本次城市联动选择插件算是我写插件的一个特例吧,不是我目前工作需要些的,算是兴趣驱使吧.之前呢,一直想写这个插件,然后错过了一个写这个插件的机会(这个得回顾到很久以前了. ...
- jQuery Autocomplete 用户快速找到并从预设值列表中选择
jQuery Autocomplete 插件根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择.通过给 Autocomplete 字段焦点或者在其中输入字符,插件开始搜索匹配的条目并显示 ...
- JQuery/JS select标签动态设置选中值、设置禁止选择 button按钮禁止点击 select获取选中值
//**1.设置选中值:(根据索引确定选中值)**// var osel=document.getElementById("selID"); //得到select的ID var o ...
随机推荐
- C#mail发送
这里,简单封装一个函数来发送邮件,代码如下: /// <summary> /// 邮件发送辅助类 /// </summary> public class MailHelper ...
- C# 两个结构相同的类进行赋值
假入两个类A类和B类不有任何继承关系,它们属性名相同,怎么给他们互相赋值呢?下面的方法就可以了. public L SetProperties<T, L>(T t) where L : n ...
- svn环境搭建
(一)svn介绍 项目管理中的版本控制问题 通常软件开发由多人协作开发,如果对代码文件.文档等没有进行版本控制,将会出现很多问题: 备份多个版本,占用磁盘空间大 解决代码冲突困难 容易引发BUG ...
- myEclipse mybatis自动生成工具xml配置
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE generatorConfiguration ...
- 云计算之概念——IaaS、SaaS、PaaS、Daas
云计算通俗来说就是输入/输出和计算不在一个主机上.计算要用到计算设备,计算设备一般是指CPU.内存和硬盘,输入/输出设备一般是指键盘.鼠标.显示器.耳机.音响.话筒等外设.而我们的个人计算机是使用主板 ...
- 优秀 Java 程序员写代码的风格,不再留坑给别人
往 期 精 彩 推 荐 [1]Java Web技术经验总结 [2]15个顶级Java多线程面试题及答案,快来看看吧 [3]面试官最喜欢问的十道java面试题 [4]从零讲JAVA ,给你一条清晰 ...
- webpack学习(四)extract-text-webpack-plugin插件
二.extract-text-webpack-plugin插件 从 bundle 中提取文本(CSS)到单独的文件 安装 npm install extract-text-webpack-plugin ...
- 时间函数应用 time
表 1. C 时间函数 function 定义 含义 返回值 精度 time() time 函数获得从 1970 年 1 月 1 日 0 点到当前的秒数,存储在time_t结构之中. time_t 秒 ...
- 有趣的IntegerCache
一个很有趣的现象,下面这两个结果输出的结果是false true,这是为什么? 翻看Integer的源码可以看到,当new Integer(12);时,没有什么特别的,就是通过构造方法创建了一个I ...
- 从windows到linux的换行转换工具dos2unix
同学们也许知道,windows中的文本文件的换行符是"\r\n",而linux中是"\n".由于换行符的不同,所以有的时候会发生一些莫名其妙的状况.至于具体什么 ...