1.  

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

  1.  

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

  1.  

　　代码，如下：

  1.  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"/>全选&nbsp;<input type="checkbox" class="sNone"/>全不选&nbsp;
  14.              <input type="checkbox" class="Inverse"/>反选&nbsp;
  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>

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

  1. jQuery/javascript实现全选全不选

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  2. jQuery实现Checkbox中项目开发全选全不选的使用

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  3. 利用jQuery实现CheckBox全选/全不选/反选

    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...

  4. jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法

    如下图: <head> <title></title> <style type="text/css"> div { border: ...

  5. jquery之全选全不选

    <input type="checkbox" onclick="selall(this)" />全选/全不选 <input type=&quo ...

  6. 用jquery实现复选框全选全不选问题（完整版），在网络上怎么也找不到完整的解决方案，重要搞全了

    首先准备jsp页面控件: 请选择您的爱好:<br> <input type="checkbox" id="all" name="se ...

  7. 用jQuery实现全选-全不选-反选的功能

    临近过年,刚学IT没多久的小白在这里祝大家在新的一年里:新春快乐,月月赚钱,天天开心,时时快乐,分分精彩,秒秒幸福,事事顺利 古人云:学而时习之,不亦说乎. 学习后经常温习所学的知识,也是件令人愉悦的 ...

  8. jQuery实现全选、不选和反选功能

    jQuery结合Font Awesome字体图标实现全选.不选和反选功能 Font Awesome字体图标链接地址:http://www.fontawesome.com.cn/faicons/ 效果: ...

  9. jquery实现全选、不选、反选的两种方法

    在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用pro ...

随机推荐

  1. JpaRepository 查询规范

    1.JpaRepository支持接口规范方法名查询.意思是如果在接口中定义的查询方法符合它的命名规则,就可以不用写实现,目前支持的关键字如下. Keyword Sample JPQL snippet ...

  2. Sys.WebForms.PageRequestManagerParserErrorException: 常见的原因是：通过调用Response.Write()修改相应时，将启用响应筛选器、HttpModules或服务器追踪

    Sys.WebForms.PageRequestManagerParserErrorException: 无法分析从服务器收到的消息,之所以出现此错误,常见的原因是:通过调用Response.Writ ...

  3. [翻译] GSProgressView

    GSProgressView 本人极不推荐使用drawRect的方式来绘制下载进度条,无论机器的性能怎么高,使用drawRect用于绘制图形都是低效的. A cute little circular ...

  4. 判断计算机是否可以ping通

    #!/usr/bin/python # -*- coding: utf-8 -*- import os of = open('servers.txt','r') ofw=open('servers_p ...

  5. Linux入门-5 用户及权限基础

    1. Linux用户基础 用户 相关文件 查看登录的用户 添加用户 修改用户信息 删除用户 组 2. Linux权限机制 权限 UGO 修改文件所属用户和组 修改权限 3. Linux权限扩展 默认权 ...

  6. 海量数据处理面试题(2) 将用户的query按出现频度排序

    问题描述: 有10个文件,每个文件1G,每个文件的每一行存放的都是用户的query,每个文件的query都可能重复.要求你按照query的频度排序. 分析:一般海量数据采用分治法时,都要用到哈希,将相 ...

  7. Linux下的Mysql的远程访问

    mysql的服务端[192.168.25.136] 1,在远程访问之前需先配置防火墙 service iptables stop (不推荐,可配置开通3306端口) 2,授权 mysql> gr ...

  8. December 06th 2016 Week 50th Tuesday

    Behind every beautiful thing, there is some kind of pain. 美丽背后,必有努力. No pains, no gains. But it seem ...

  9. 深入剖析Swift性能优化

    简介 2014年,苹果公司在WWDC上发布Swift这一新的编程语言.经过几年的发展,Swift已经成为iOS开发语言的“中流砥柱”,Swift提供了非常灵活的高级别特性,例如协议.闭包.泛型等,并且 ...

  10. 【NOIP2014】解方程

    题目描述 已知多项式方程 \[a_0 + a_1x + a_2x^2 + \dots +a_nx^n=0\] 求这个方程在\([1,m]\)内的整数解(\(n\)和\(m\)均为正整数). 输入输出格 ...