今天打算用jQuery实现一下复选框的全选、全不选和反选问题，刚开始用的是attr("checked",true/false)方法，发现只能在最开始实现一次全选，可以实现全不选，无法实现反选，总之调试了好久死活得不到想要的效果。最后发现，jquery 1.7.2之前支持attr对固有属性的操作，后面的版本只能用prop了。详细了解jQuery中attr()和prop()的区别，请点击参考。

　　下面贴上我的代码以供参考：

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>全选、全不选、反选</title>

     <style type="text/css">

         #choose input {

             display: block;

         }

     </style>

     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

     <script type="text/javascript">

         $(function(){

             var $choose = $("#choose input");

             //全选

             $("#all").click(function(){

                 $choose.each(function(){

                     $(this).prop("checked",true);

                 });

             });

             //全不选

             $("#not").click(function(){

                 $choose.prop("checked",false);

             });

             //反选

             $("#reverse").click(function(){

                 $choose.each(function(){

                     $(this).prop("checked",!$(this).prop("checked"));

                 });

             });

         });

     </script>

 </head>

 <body>

     <div id="box-function">

         <input id="all" type="button" value="全选" />

         <input id="not" type="button" value="全不选" />

         <input id="reverse" type="button" value="反选" />

     </div>

     <div id="choose">

         <input type="checkbox" />

         <input type="checkbox" />

         <input type="checkbox" />

         <input type="checkbox" />

         <input type="checkbox" />

         <input type="checkbox" />

         <input type="checkbox" />

         <input type="checkbox" />

         <input type="checkbox" />

         <input type="checkbox" />

         <input type="checkbox" />

         <input type="checkbox" />

     </div>

 </body>

 </html>

　　

　　全文完，欢迎各位前辈批评指正！

jQuery实现复选框全选、全不选、反选问题解析的更多相关文章

  1. js 全选选框与取消全选代码

    设置一个全选选框和四个子选框,要实现点击全选后四个子选框选中,取消全选后四个子选框也取消.全选后点击某个子选框,全选也能取消.当四个子选框都选中时,全选框也被选择. 实现代码: <script& ...

  2. CheckedListBoxControl 实现复选框的单选与多选功能

    由于工作需要,需要实现复选框的单选与多选功能,找了好多资料都不是很全,经过两天苦苦的挖挖挖,终于完成啦O(∩_∩)O哈哈~ 用DEV控件中的CheckedListBoxControl控件,当然VS中的 ...

  3. 实现在DevExpress.XtraGrid.GridControl的列头绘制复选框以实现全选的功能

    首先新建一个Win Form测试项目,拖一个GridControl控件到窗体上. public partial class Form1 : Form { public Form1() { Initia ...

  4. element-ui 里面el-checkbox多选框，实现全选单选

    data里面定义了 data:[],        actionids:[],//选择的那个actionid        num1:0,//没选择的计数        num2:0,//选中的计数  ...

  5. layui 复选框checkbox 实现全选全选

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. firefox(火狐)下 js中设置checkbox属性checked="checked"已有，但复选框却不显示勾选的原因

    刚看到问题时以为是浏览器兼容性的原因,ie.google都能正常显示. 网上查询之后发现是jQuery的attr()方法用的不恰当. jQuery1.6之前使用attr()可以修改 ,从jQuery ...

  7. Yii 生成表单下拉选框及查询下拉选框

    CHtml类参考: http://www.yiichina.com/api/CHtml#activeDropDownList-detail activeDropDownList() 方法 public ...

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

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

  9. FineReport——JS二次开发（复选框全选）

    在进行查询结果选择的时候,我们经常会用到复选框控件,对于如何实现复选框全选,基本思路: 在复选框中的初始化事件中把控件加入到一个全局数组里,然后在全选复选框里对数组里的控件进行遍历赋值. 首先,定义两 ...

  10. jquery对复选框(checkbox)的操作（精华）

    @{ Layout = null;} <!DOCTYPE html> <html><head> <meta name="viewport" ...

随机推荐

  1. docker mongo backup 不用找啦，就在这里。

    rm -rf /tmp/mongodump && mkdir /tmp/mongodumpdocker run -it --rm --link lps-mongodb:mongo -v ...

  2. Java(Android)解析KML文件

    參考自:http://blog.csdn.net/yyywyr/article/details/38359049 http://blog.csdn.net/warrenwyf/article/deta ...

  3. MySQL 慢查询日志(Slow Query Log)

    同大多数关系型数据库一样.日志文件是MySQL数据库的重要组成部分.MySQL有几种不同的日志文件.通常包含错误日志文件,二进制日志,通用日志.慢查询日志.等等.这些日志能够帮助我们定位mysqld内 ...

  4. C++语言基础(1)-命名空间

    一个中大型软件往往由多名程序员共同开发,会使用大量的变量和函数,当有两个人都同时定义了一个名字相同的全局变量或函数的时候,若是把他们的代码整合在一块编译,此时编译器就会提示变量或函数重复定义,C++为 ...

  5. 2. Trailing Zeros【easy】

    2. Trailing Zeros[easy] Write an algorithm which computes the number of trailing zeros in n factoria ...

  6. URL浅谈

    URL中的锚 URL中的锚就是#,语法: #foo 其中定位锚的方式有2种,id和name属性都可以定位锚. 例子: <div name='top'>top</div>或者&l ...

  7. flume A simple example

    http://flume.apache.org/FlumeUserGuide.html A simple example

  8. linux $* 和$@ if [ ](字符串比较)

    $* 将命令后面的参数理解为一个类似为字符串,$@理解为多个单个的参数,类似理解成数据 $#参数总数 [root@mini0 test]# ./test4.sh jskd sj21 Using the ...

  9. 2017 Wuhan University Programming Contest (Online Round) Lost in WHU 矩阵快速幂 一个无向图，求从1出发到达n最多经过T条边的方法数，边可以重复经过，到达n之后不可以再离开。

    /** 题目:Lost in WHU 链接:https://oj.ejq.me/problem/26 题意:一个无向图,求从1出发到达n最多经过T条边的方法数,边可以重复经过,到达n之后不可以再离开. ...

  10. mybatis执行多条sql语句

    1,mybatis执行多条sql语句,有以下几种思路, a,存储过程 b,修改jdbc的参数,允许执行多条语句,如下所示: sqlserver可以直接使用begin,end来执行多条语句, mysql ...