可能有浏览器兼容性，注意html里的checked是一个属性，存在就默认选中。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

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

 </head>

 <body>

     <p><input type="checkbox">篮球</p>

     <p><input type="checkbox">唱歌</p>

     <p><input type="checkbox">旅游</p>

     <p><input type="checkbox">美食</p>

     <input type="button" value="全选" name="all">

     <input type="button" value="全不选" name="none">

     <input type="button" value="反选" name="reverse">

 </body>

 <script>

     //这个地方在谷歌浏览器有问题，点全不选后再点全选没有效果，ie里面没问题。

     //checked在html里面是一个属性，不管checked=''里面是啥，都会默认选中。

     $('[name=all]').click(function(){

         $('p input').attr({'checked':true});

     });

     $('[name=none]').click(function(){

         $('p input').removeAttr('checked',false);

     });

     $('[name=reverse]').click(function(){

         $('p input').each(function(){

             //这里使用js的this对象，checked是一个属性

             this.checked = !this.checked;

         });

     });

 </script>

 </html>

修改后，chrome也可以用了：

 <script>

     //这个地方在谷歌浏览器有问题，点全不选后再点全选没有效果，ie里面没问题。

     //checked在html里面是一个属性，不管checked=''里面是啥，都会默认选中。

     $('[name=all]').click(function(){

         //jqery负责遍历，js的this改变checked的true和false

         $('p input').each(function(){

             this.checked = true;

         });

     });

     $('[name=none]').click(function(){

         //同上

         $('p input').each(function(){

             this.checked = false;

         });

     });

     $('[name=reverse]').click(function(){

         $('p input').each(function(){

             //这里使用js的this对象，checked是一个属性

             // alert(!this.checked);

             this.checked = !this.checked;

         });

     });

 </script>

 </html>

再次改进，使用prop()方法，专门修改固有属性，比如checked：

 <script>

     $('[name=all]').click(function(){

         $(':checkbox').prop('checked',true);

     });

     $('[name=none]').click(function(){

         $(':checkbox').prop('checked',false);

     });

     $('[name=anti]').click(function(){

         $(':checkbox').each(function(){

             var isTrue = !$(this).prop('checked');

             // alert(isTrue);

             $(this).prop('checked',isTrue);

         });

     });

 </script>

Jquery学习笔记（4）--checkbox全选反选的更多相关文章

  1. jquery、js操作checkbox全选反选

    全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...

  2. jquery数组之存放checkbox全选值示例代码

    使用jquery数组可以存放checkbox全选值,下面有个不错的示例,感兴趣的朋友可以参考下. 复制代码代码如下: <input type="checkbox" id=&q ...

  3. 表单javascript checkbox全选 反选 全不选

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. 关于Winform下DataGridView中实现checkbox全选反选、同步列表项的处理

    近期接手一个winform 项目,虽然之前有.net 的经验,但是对一些控件的用法还不是很熟悉. 这段时间将会记录一些在工作中遇到的坎坷以及对应的解决办法,写出来与大家分享并希望大神提出更好解决方法来 ...

  5. jQuery使用prop设置checkbox全选、反选

    $(function(){     var checkbox = $("input[type='checkbox']");     //全选     $('#select-all' ...

  6. jQuery实现checkbox全选反选及删除等操作

    1.list.html 说明:用checkbox数组Check[]存放每一行的ID值 <div id="con"> <table width="100% ...

  7. JS学习笔记 - fgm练习 2-12- 全选反选 判断CheckBox是否选中 &&运算符

    练习地址:http://www.fgm.cc/learn/lesson2/12.html 总结: 1.  && 运算符,从左向右依次执行,如果遇到 false,就不再继续执行后面的语句 ...

  8. jquery checkbox 全选反选代码只能执行一遍，第二次就失败

    遇到问题背景: 在写到购物车的全选交互的时候,商品选中的状态只有在第一次的时候可以,第二次就无法选中:(代码如下) $(".chooseall").click(function() ...

  9. checkbox 全选反选实现全代码

    //跳转到指定action function validateForm(url){ if($("#form").form('validate')){ var x=document. ...

随机推荐

  1. ylbtech-LanguageSamples-Libraries(库)

    ylbtech-Microsoft-CSharpSamples:ylbtech-LanguageSamples-Libraries(库) 1.A,示例(Sample) 返回顶部 “库”示例 本示例演示 ...

  2. Storm应用系列之——集成Kafka

    本文系原创系列,转载请注明. 原帖地址:http://blog.csdn.net/xeseo 前言 在前面Storm系列之——基本概念一文中,提到过Storm的Spout应该是源源不断的取数据,不能间 ...

  3. C/C++ 宏定义中#、##、#@的区别

    #表示:对应变量字符串化 ##表示:把宏参数名与宏定义代码序列中的标识符连接在一起,形成一个新的标识符 连接符#@:它将单字符标记符变换为单字符,即加单引号.例如: #define B(x) #@x ...

  4. 过滤器chain.doFilter(request,response)的含义

    过滤器的生命周期一般都要经过下面三个阶段: 初始化: 当容器第一次加载该过滤器时,init() 方法将被调用.该类在这个方法中包含了一个指向 Filter Config 对象的引用.我们的过滤器实际上 ...

  5. Druid对比Redshift

    Redshift 内部使用了亚马逊取得了授权的ParAccel 实时注入数据 抛开可能的性能不同, 有功能性的不同 Druid 适合分析大数据量的流式数据, 也能够实时加载和聚合数据一般来讲, 传统的 ...

  6. Spring框架学习（7）spring mvc入门

    内容源自:spring mvc入门 一.spring mvc和spring的关系 spring mvc是spring框架提供的七层体系架构中的一个层,是spring框架的一部分,是spring用于处理 ...

  7. Spring整合JMS——三种connectionFactory

    1.SingleConnectionFactory:对于建立JMS服务器链接的请求会一直返回同一个链接,并且会忽略Connection的close方法调用.(org.springframework.j ...

  8. jstl表达式引用文件

    <script type="text/javascript" src="<c:url value="/resources/js/common/jqu ...

  9. SOA服务总线设计

    背景 基于总线的设计,借鉴了计算机内部硬件组成的设计思想(通过总线传输数据).在分布式系统中,不同子系统之间需要实现相互通信和远程调用,比较直接的方式就是“点对点”的通信方式,但是这样会暴露出一些很明 ...

  10. js知识梳理2:对象属性的操作

    1.属性的查询和设置 ①基本语法 这个简单,可以通过点(.)或方括号([])运算来获取属性的值,注意点运算符后的标识符不能是保留字,方括号内的表达式必须返回字符串或返回一个可以转换成字符串的值. va ...