在写购物车案例时实现全选操作使用的是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. 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. 从golang-gin-realworld-example-app项目学写httpapi (八)

    https://github.com/gothinkster/golang-gin-realworld-example-app/blob/master/common/unit_test.go 单元测试 ...

  2. 使用ifstream和getline读取文件内容[c++] ZZ

      假设有一个叫 data.txt 的文件, 它包含以下内容: Fry: One Jillion dollars.[Everyone gasps.]Auctioneer: Sir, that's no ...

  3. Effective C++(9) 构造函数调用virtual函数会发生什么

    问题聚焦: 不要在构造函数和析构函数中调用virtual函数,因为这样的调用不会带来你预想的结果. 让我先来看一下在构造函数里调用一个virtual函数会发生什么结果 Demo class Trans ...

  4. 延期年金(deferred annuity)

    含义:推迟m个时期后才开始付款的年金. 延期年金现值为 二.永续年金(Perpetuity) 永续年金:无限期支付下去的年金. 为期末付永续年金(perpetuity-immediate)的现值 表示 ...

  5. [BZOJ 2322][BeiJing2011]梦想封印

    梦想封印 题意 原题面: Problem 2322. -- [BeiJing2011]梦想封印 2322: [BeiJing2011]梦想封印 Time Limit: 20 Sec  Memory L ...

  6. HTTP协议图--HTTP 协议基础

    1.通过请求和响应的交换达成通信 应用 HTTP 协议时,必定是一端担任客户端角色,另一端担任服务器端角色.仅从一条通信线路来说,服务器端和客服端的角色是确定的.HTTP 协议规定,请求从客户端发出, ...

  7. D3——Updates, Transitions, and Motion

    <script type="text/javascript"> ; ; ; , , , , , , , , , ,, , , , , , , , , ]; //crea ...

  8. python过滤文件中特殊标签

    Beautiful Soup Beautiful Soup 是用Python写的一个HTML/XML的解析器,它可以很好的处理不规范标记并生成剖析树(parse tree). 它提供简单又常用的导航( ...

  9. 【问题】 cookie 不保存特殊字符 解决办法

    遇到的问题: 在做项目,用geolocation 获取经纬度,格式如(23.1133,113.2552) ,想保存到cookie中备用.但读取cookie出来之后发现逗号变成了  %2c. 找到的原因 ...

  10. jmeter接口测试3-正则表达式提取器的使用

    正则表达式的用处很多,最基础的用法 1,断言 2,传参(关联) 例子 1.http请求 2正则表达式提取,想要提取列表列中id,一遍打开列表页 如果是1,每次就会取相同的值!匹配数字的权限高于模板$0 ...