在写购物车案例时实现全选操作使用的是js的getAttribute（）setAttribute（）方法获取checked属性的值是undefined实现完成之后全选操作，如果在全选中的情况下改变其中一个的状态再点击全选，之前被取消的将不在被选中。之后使用js的DOM.checked属相的获得是true或false，操作很方便，很完美没有bug。




　　学了jquery后单独实现下全选、全不选、反选操作。




　　代码，如下：


 1 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body>

     <h3>我的爱好</h3>

     <ul>

         <li>

             <input type="checkbox" class="sAll"/>全选&nbsp;<input type="checkbox" class="sNone"/>全不选&nbsp;

             <input type="checkbox" class="Inverse"/>反选&nbsp;

         </li>

         <li><input type="checkbox" class="check"/>篮球</li>

         <li><input type="checkbox" class="check"/>足球</li>

         <li><input type="checkbox" class="check"/>排球</li>

         <li><input type="checkbox" class="check"/>羽毛球</li>

         <li><input type="checkbox" class="check"/>乒乓球</li>

     </ul>

     <script src="jquery.js"></script>

     <script>

         /*全选*/

         //1.拿到全选复选框的jquery对象调用change（），当前对象的状态改变时进行下面操作

         $('.sAll').change(function () {

             //2.拿到所有class属相值为check的对象，将其checked属性值设置为true。

             $('.check').attr('checked',true);

             //点击全选，全不选、反选其中一个时其它两的选中状态清除

             $('.sNone').attr('checked',false);

             $('.Inverse').attr('checked',false);

         });

         //alert($('.sAll').attr('checked'));

         /*全不选*/

         $('.sNone').change(function () {

             $('.check').attr('checked',false);

             //点击全选，全不选、反选其中一个时其它两的选中状态清除

             $('.sAll').attr('checked',false);

             $('.Inverse').attr('checked',false);

         });

         /*反选*/

         //注意：attr()方法取第一个的值 ，赋值所用

         $('.Inverse').change(function () {

             //遍历所有要操作的复选框

             $('.check').each(function () {

                 //如果该复选框的checked属性为true，则改为false，反之为true

                 if($(this).attr('checked')){

                     $(this).attr('checked',false);

                 }else{

                     $(this).attr('checked',true);

                 }

             });

             //将全选和全不选的状态去掉（点击全选，全不选、反选其中一个时其它两的选中状态清除）

             $('.sAll').attr('checked',false);

             $('.sNone').attr('checked',false);

         });

     </script>

 </body>

 </html>




												


											
jQuery实现全选、全不选以及反选操作的更多相关文章
	

    
						
  1. jQuery/javascript实现全选全不选
		
    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...
    
		
    2. 
						
  2. jQuery实现Checkbox中项目开发全选全不选的使用
		
    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...
    
		
    3. 
						
  3. 利用jQuery实现CheckBox全选/全不选/反选
		
    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...
    
		
    4. 
						
  4. jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法
		
    如下图: <head> <title></title> <style type="text/css"> div { border:  ...
    
		
    5. 
						
  5. jquery之全选全不选
		
    <input type="checkbox" onclick="selall(this)" />全选/全不选 <input type=&quo ...
    
		
    6. 
						
  6. 用jquery实现复选框全选全不选问题（完整版），在网络上怎么也找不到完整的解决方案，重要搞全了
		
    首先准备jsp页面控件: 请选择您的爱好:<br> <input type="checkbox" id="all" name="se ...
    
		
    7. 
						
  7. 用jQuery实现全选-全不选-反选的功能
		
    临近过年,刚学IT没多久的小白在这里祝大家在新的一年里:新春快乐,月月赚钱,天天开心,时时快乐,分分精彩,秒秒幸福,事事顺利 古人云:学而时习之,不亦说乎. 学习后经常温习所学的知识,也是件令人愉悦的 ...
    
		
    8. 
								
  8. jQuery实现全选、不选和反选功能
		
    jQuery结合Font Awesome字体图标实现全选.不选和反选功能 Font Awesome字体图标链接地址:http://www.fontawesome.com.cn/faicons/ 效果: ...
    
		
    9. 
						
  9. jquery实现全选、不选、反选的两种方法
		
    在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用pro ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. C#-XML-数据传输
			
    http://www.cnblogs.com/fengxuehuanlin/p/5631664.html 关于xml是属于一个比较重要的东西,在平时开发的过程中,这块内容最主要的是要掌握XML内容的读 ...
    
			
    2. 
						
  2. 打通版微社区（2）：服务器部署MySql数据库 For DZ3.2
			
    写在前面:单独写部署MySql原因是,我这边的应用数据库都是独立存在的,数据与应用分别部署在不同的服务器.另外我也没有实际部署MySql的经验,特意写一篇日志,张记性.安装MySql参考了http:/ ...
    
			
    3. 
						
  3. iOS设计模式 - 策略
			
    iOS设计模式 - 策略 效果 说明 1. 把解决相同问题的算法抽象成策略(相同问题指的是输入参数相同,但根据算法不同输出参数会有差异) 2. 策略被封装在对象之中(是对象内容的一部分),策略改变的是 ...
    
			
    4. 
						
  4. Linu下的Mysql学习详解_【all】
			
    Linux下Mysql简介 1.什么是Mysql(MariDB) 1.数据库:存储数据的仓库    2.关系型数据库:mysql(主流用5.5,5.6), oracle        本质:二维表   ...
    
			
    5. 
						
  5. ZT 线程处理函数pthread_cleanup_push / pthread_cleanup_pop
			
    http://bbs.csdn.net/topics/390688105 2)创建了线程,但是线程退出时没有线程调用pthread_join() 线程资源没有回收,如果持续创建线程,到一定数量后将不能 ...
    
			
    6. 
						
  6. [EffectiveC++]item24：若所有参数皆需类型转换，请为此采用non-member函数
			
    Declare non-member functions when type conversions should apply to all parameters. 104页 只有当参数被列于参数列( ...
    
			
    7. 
						
  7. 判断元素（expected_conditions）
			
    判断元素 如何判断一个元素是否存在,如何判断 alert 弹窗出来了,如何判断动态的元素等等一系列的判断,在 selenium 的 expected_conditions 模块收集了一系列的场景判断方 ...
    
			
    8. 
						
  8. SVN There are unfinished transactions detected
			
    在ECLIPSE中报这个错,不能提交和更新代码和clean up 解决办法:关闭ECLIPSE,使用工具对SVN执行 clean up. 重新启动ECLIPSE,解决冲突文件,可以正常使用SVN
    
			
    9. 
						
  9. 打包工具的核心原理（转自：https://juejin.im/entry/5b223ebd518825748b569bda）
			
    打包工具就是负责把一些分散的小模块,按照一定的规则整合成一个大模块的工具.与此同时,打包工具也会处理好模块之间的依赖关系,最终这个大模块将可以被运行在合适的平台中. 打包工具会从一个入口文件开始,分析 ...
    
			
    10. 
						
  10. UIView 中 hidden、alpha、clear color 与 opaque 的区别
			
    透明度与图层混合相关,影响到图片绘制的效率. hidden 此属性为 BOOL 值,用来表示 UIView 是否隐藏.关于隐藏大家都知道就是让 UIView 不显示而已,但是需要注意的是: 当前 UI ...
    
			
    11.