可能有浏览器兼容性，注意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. ExtJS初学笔记---Ext.Msg.alert无效果

    最近开始学ExtJS,书上的第一个例子是: 1 2 3 Ext.onReady(function(){     Ext.Msg.alert('Hello.', 'Hello'); }); 这个是Ext ...

  2. 机器学习：K-近邻算法（KNN）

    机器学习:K-近邻算法(KNN) 一.KNN算法概述 KNN作为一种有监督分类算法,是最简单的机器学习算法之一,顾名思义,其算法主体思想就是根据距离相近的邻居类别,来判定自己的所属类别.算法的前提是需 ...

  3. WinForm客户端调用 WebService时 如何启用Session

    WinForm客户端调用 WebService时 如何启用Session 摘自: http://www.cnblogs.com/swtseaman/archive/2011/04/18/2020176 ...

  4. 【Web】Django OAuth invalid_grant error

    This can happen if the code is expired. They expire pretty quickly by default. You can look up your ...

  5. Java 8 Stream 教程

    Java 8 Stream Tutorial 本文采用实例驱动的方式,对JAVA8的stream API进行一个深入的介绍.虽然JAVA8中的stream API与JAVA I/O中的InputStr ...

  6. .NET 之 有效预防.NET应用程序OOM

    大部分的内存溢出(及内存泄漏)都和不好的开发习惯有直接关系,以下几个方式可以有效预防OOM. 一.批量和分页 每个合格的coder对数据的处理,必须要有分页或批量多次的意识.大数据量的读取或查询结果集 ...

  7. Linux打包解压

    tar tar命令可以用来压缩打包单文件.多个文件.单个目录.多个目录. 常用格式: 单个文件压缩打包: tar czvf my.tar file1 多个文件压缩打包: tar czvf my.tar ...

  8. 经常使用meta标签属性

    <meta> 1.Keywords (keyword) 说明:告诉搜索引擎你网页的keyword是什么. 使用方法:<meta name="keywords" c ...

  9. 使用VisualSVN建立SVN服务器

    原地址:http://blog.csdn.net/happyjiang2009/article/details/5719988 以前使用官方Subversion搭建SVN版本控制环境,感觉很繁琐,需要 ...

  10. Spring-1 之入门

    (一)简单对象Spring  XML配置说明 使用Spring (Spring 3.0) 实现最简单的类映射以及引用,属性赋值: 1.1.新建类UserModel: 1 2 3 4 5 6 7 8 9 ...