可能有浏览器兼容性，注意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. LINUX之文件操作权限讲解

    r(Read,读取):对文件而言,具有读取文件内容的权限:对目录来说,具有浏览目 录的权限. w(Write,写入):对文件而言,具有新增.修改文件内容的权限:对目录来说,具有删除.移动目录内文件的权 ...

  2. Git系列二之数据管理

    1.Git基本管理 git常用的基本操作 1.1提交数据 我们可以简单的把工作目录理解成是一个被Git服务程序管理的目录,Git会时刻的追踪目录内文件的改动,另外在安装好了Git服务程序后,默认就会创 ...

  3. 《深入理解Java虚拟机》笔记5

    Java虚拟机可以执行的语言并不是只有Java语言,比如jython也可以 运行在Java虚拟机上.不明白字节码之前觉得挺疑惑,为什么和Java 完全不同语法的程序语言也可以运行在虚拟机上呢? 不得不 ...

  4. Android-各个屏幕的logo尺寸要求

    DENSITY SIZE LOCATION RATIO SCREEN MARGIN XXXHDPI 192×192 drawable-xxxhdpi 4 640 DPI 12 to 16 pixels ...

  5. 前端性能优化：使用Array.prototype.join代替字符串连接

    来源:GBin1.com 有一种非常简单的客户端优化方式,就是用Array.prototype.join代替原有的基本的字符连接的写法.在这个系列的第一篇中,我在代码中使用了基本字符连接: htmlS ...

  6. 检索数据（mysqli的面向对象用法）

    <?php require('./kwd.php'); $conn=@new mysqli('localhost','root',$kwd,'mytestdb'); if($conn===fal ...

  7. 在EXCEL中如何让一列数字变成文本格式?就是想让单元格的左上角变一个绿绿的？

    如何在EXCEL中如何让一列数字变成文本格式?就是想让单元格的左上角变一个绿绿的? 解决方案:将整列单元格格式设为文本,然后,选中该列,数据--分列--完成 详细步骤: (1)选中1行或者1列,再单击 ...

  8. 开机自启动：从busybox到debian

    需要在mint上设置opensips的开机自启动,翻了半天资料还是一知半解.最后在opensips的官方文档,查到用下面的语句,添加自启动成功.不过貌似还是会有启动不成功,没有仔细测试过. updat ...

  9. CSS优先级的详细解说

    一.什么是CSS优先级? 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 二.CSS优先级规则 既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是本次所需要讲的重 ...

  10. Hibernate 多对一关联查询

     版权声明:本文为博主原创文章,如需转载请标注转载地址.  博客地址:http://www.cnblogs.com/caoyc/p/5598269.html  一.单向多对一和双向多对一的区别 如果只 ...