Jquery中对checkbox的各种“全选”或者“取消”功能实现(特别注意1.6+的一定不能使用attr来取属性了!用prop!)
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- </head>
- <body>
- <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript">
- </script>
- <script>
- $(document).ready(function () {
- var xsChk = 'px';//定义的样式
- var xsChkAll = "input[type='checkbox'][class='" + xsChk + "'][name]";//所有定义此样式的checkbox
- $(xsChkAll).each(function () {
- var name = $(this).prop("name");
- name = "input[type='checkbox'][class!='" + xsChk + "'][name='" + name + "']";//此全选框下面的子checkbox
- $(this).on('click', function () {
- $(name).prop("checked", $(this)[0].checked);
- })
- var xschk = $(this);
- $(name).on('click', function () {
- var IAll = $(name).length; //此子项目下所有checkbox的个数
- var IChk = $(name + ":checked").length; //此子项目下所有勾选checkbox的个数
- var isAllChecked = true; //是否是全选
- if (IAll != IChk) {
- isAllChecked = false;
- }
- $(xschk).prop("checked", isAllChecked);
- });
- });
- });
- </script>
- <legend>全选one</legend>
- <input type="checkbox" class="xsChk" name="chk" />
- 全選
- <input type="checkbox" name="chk" />
- 1<br />
- <input type="checkbox" name="chk" />
- 2<br />
- <input type="checkbox" name="chk" />
- 3<br />
- <input type="checkbox" name="chk" />
- 4<br />
- <legend>全选two</legend>
- <input type="checkbox" class="xsChk" name="chk1" />
- 全選2
- <input type="checkbox" name="chk1" />
- 11<br />
- <input type="checkbox" name="chk1" />
- 22<br />
- <input type="checkbox" name="chk1" />
- 33<br />
- <input type="checkbox" name="chk1" />
- 44<br />
- </body>
- </html>
本文修改于博客园里一个案例,现在找不到这遍文章的地址,特此说明!
Jquery中对checkbox的各种“全选”或者“取消”功能实现(特别注意1.6+的一定不能使用attr来取属性了!用prop!)的更多相关文章
- checkbox全选和取消功能
这是开发中常见的小功能,想当初我也曾对于attr和prop的不了解踩过坑. 前端工作中,常常会使用到select复选框,select复选框有一个属性checked,当使用js或者jquery控制这个属 ...
- 如何在repeater中找到checkbox并实现全选删除
checkbox使用客户端控件,且给repeater里边的checkbox添加ruanat=server属性表头中的chkTotal的属性一定不要加此属性....然后 全选的javascript代码 ...
- 使用js实现复选框的全选、取消功能
id为all的想设置全选的那个框的id,name为checkname[]的是每个小复选框: 第一种: <script> function checkAll() { var all=docu ...
- 全选、取消、2级 checkbox的选中切换
需求:点击父级checkbox的时候,子级出现全选或全取消:点击子级时,如:子级都是在未选中时,点击某一个子级,则父级选中:如:子级中只有一个选中状态(其他子级都是未选中),点击该子级,则父级也改为未 ...
- js实现checkbox组 全选和取消全选
做后台管理程序时,用到一个checkbox组的全选和取消全选的功能, 主要是逻辑上的坑,理清后大概是: 1.全选点击后,小弟1~4都要选上,点击取消,小弟们也要取消 2.只要有一个小弟取消时,全选要取 ...
- jquery操作checkbox方法(全选、全不选、至少选择一个、选择值/文本)
原文:http://blog.csdn.net/u014079773/article/details/52371382 在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值, ...
- Jquery 利用单个复选款(checkbox)实现全选、反选
1 <script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").clic ...
- jQuery --checkbox全选和取消全选简洁高效的解决办法
最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...
- JS实现全选与取消 Jquery判断checkbox是否被选中
1.JS实现checkbox全选与取消 <body> <input type="checkbox" name="select_all"/> ...
随机推荐
- WNDR4300v2 固件编译
WNDR4300v2 固件编译 1.从官网下载源码 从官网找到 https://kb.netgear.com/2649/NETGEAR-Open-Source-Code-for-Programme ...
- ZOJ 1015 弦图判定
一些定义: 弦图是一种特殊图:它的所有极小环都只有3个顶点. 单纯点:该顶点与其邻接点在原图中的导出子图是一个完全图. 图G的完美消去序列:一个顶点序列a1a2a3...an,使得对于每个元素ai,a ...
- CentOS6永久修改主机名称
1.修改network vi /etc/sysconfig/network 修改HOSTNAME值 2.修改hosts vi /etc/hosts 修改中间的那个localhost 3.使用hostn ...
- C#获取picturebox图片路径
path = ofd.FileName; filename = ofd.SafeFileName; lu="E:\\鹿瑶\\Csharp\\DB学生报名系统\\baomingDemo\\bi ...
- javascript(js)自动刷新页面的实现方法总结
自动刷新页面的实现方法总结: 1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔 ...
- iTunes Connect App Bundles
App Bundles捆绑销售提交流程: 1. 在iTunes Connect左上「+」选「Create Bundle」到「New App Bundle」挑选已上线应用(最多可捆绑10个应用) 2. ...
- Ping用法大全
Ping是典型的网络工具.Ping可以辨别网络功能的某些状态. 这些网络功能的状态是日常网络故障诊断的基础.特别是Ping可以识别连接的二进制状态(也就是是否连通).可是,这仅仅是 ...
- boa cgi程序cgi_header: unable to find LFLF
ftp必须用二进制模式上传才可以 sqlite3 arm-linux-gcc hello.c -o hello.cgi -I /cgi/include -L /cgi/lib -static -lsq ...
- OpenCV学习(3) OpenCV框架
OpenCV是一个开源的视觉库,其中包括很多计算机视觉的算法实现.在版本2.2以后,OpenCV采用C++特征的API,在1.x版本中,OpenCV函数都是传统的C语言形式. ...
- Informatica 常用组件Source Qualifier之四 SQL Query
源限定符转换提供 SQL 查询选项以覆盖默认的查询.您可以输入您的源数据库支持的 SQL 语句.输入查询之前,请连接您要在映射中使用的所有输入和输出端口. 编辑 SQL 查询时,您可以生成并编辑默认查 ...