jQuery实现全选、全不选以及反选操作
时间:2018-12-09
本文章向大家介绍jQuery实现全选、全不选以及反选操作,主要包括jQuery实现全选、全不选以及反选操作相关应用实例、知识点总结和注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在写购物车案例时实现全选操作使用的是js的getAttribute()setAttribute()方法获取checked属性的值是undefined实现完成之后全选操作,如果在全选中的情况下改变其中一个的状态再点击全选,之前被取消的将不在被选中。之后使用js的DOM.checked属相的获得是true或false,操作很方便,很完美没有bug。
学了jquery后单独实现下全选、全不选、反选操作。
代码,如下:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <h3>我的爱好</h3> 11 <ul> 12 <li> 13 <input type="checkbox" class="sAll"/>全选 <input type="checkbox" class="sNone"/>全不选 14 <input type="checkbox" class="Inverse"/>反选 15 </li> 16 <li><input type="checkbox" class="check"/>篮球</li> 17 <li><input type="checkbox" class="check"/>足球</li> 18 <li><input type="checkbox" class="check"/>排球</li> 19 <li><input type="checkbox" class="check"/>羽毛球</li> 20 <li><input type="checkbox" class="check"/>乒乓球</li> 21 22 </ul> 23 <script src="jquery.js"></script> 24 <script> 25 /*全选*/ 26 //1.拿到全选复选框的jquery对象调用change(),当前对象的状态改变时进行下面操作 27 $('.sAll').change(function () { 28 //2.拿到所有class属相值为check的对象,将其checked属性值设置为true。 29 $('.check').attr('checked',true); 30 31 //点击全选,全不选、反选其中一个时其它两的选中状态清除 32 $('.sNone').attr('checked',false); 33 $('.Inverse').attr('checked',false); 34 }); 35 //alert($('.sAll').attr('checked')); 36 /*全不选*/ 37 $('.sNone').change(function () { 38 $('.check').attr('checked',false); 39 40 //点击全选,全不选、反选其中一个时其它两的选中状态清除 41 $('.sAll').attr('checked',false); 42 $('.Inverse').attr('checked',false); 43 }); 44 /*反选*/ 45 //注意:attr()方法取第一个的值 ,赋值所用 46 $('.Inverse').change(function () { 47 //遍历所有要操作的复选框 48 $('.check').each(function () { 49 //如果该复选框的checked属性为true,则改为false,反之为true 50 if($(this).attr('checked')){ 51 $(this).attr('checked',false); 52 }else{ 53 $(this).attr('checked',true); 54 } 55 56 }); 57 //将全选和全不选的状态去掉(点击全选,全不选、反选其中一个时其它两的选中状态清除) 58 $('.sAll').attr('checked',false); 59 $('.sNone').attr('checked',false); 60 }); 61 </script> 62 </body> 63 </html>
- flex布局——回顾
- WordPress 网站开发“微信小程序”实战(五)
- Windows Runtime(WinRT) 揭秘
- WeApp-Workflow: 基于Gulp 的微信小程序前端开发工作流
- 如何安装Windows Phone SDK 7.1 Release Candidate (RC)
- 微信与支付宝回应央行新规:认同央行规范!
- Gulp 工作流中Sass 增量编译功能的探索
- Sass与Compass——回顾
- 苹果就“降速门”致歉;央行批扫码支付不正当竞争;王健林旗下公司遭集体裁员
- 姚期智教授:量子计算是千亿万亿级别的产业,或成为科技创新的引擎
- Powershell中禁止执行脚本解决办法
- 使用AsyncTask异步更新UI界面及原理分析
- 商家为何要做小程序?
- Android中关于dip和px以及转换的总结
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 让python装饰器不再晦涩难懂
- Android开发3年,九月份面试12家大厂跳槽成功,我有一些面试经验想分享给你们
- MySQL的防火墙功能
- Java中线程池的参数有几个?
- MySQL企业版备份工具MEB
- python生成器函数的应用场景举例---为copy过程添加进度条显示
- 短网址程序YOURLS安装及配置教程与设置中文
- MGR用哪个版本?5.7 vs 8.0
- 同事直呼666!小姐姐仅用3行代码就能玩出花来
- MySQL升级至8.0需要考虑哪些因素?
- 某云Music——JS破解全过程
- 和低效 IO 说再见,回头补一波 Java 7 的 NIO.2 特性
- 框架源码调试实战之easypoi异常解决方案精讲
- MySQL8.0的错误日志
- Shiro学习笔记(一)