今天打算用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. POJ 3561 Pseudographical recognizer

    [题意简述]:矩阵中除了'.'仅仅能出现一种符号.是这些之中的一个'‑', '|', '\', or '/',并且就是当除了'.'之外还仅仅有一种符号时.这个符号还必须连成一条直线,否则就是错的,这个 ...

  2. c#中从string数组转换到int数组及比较两个字符串相等

    string[] input = { "1", "2", "3", "4", "5", " ...

  3. Delphi获得与设置系统时间格式《转》

    unit Unit1; interface uses   Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, Syst ...

  4. CSS3 not

    AND (&&): .registration_form_right input:not([type="radio"]):not([type="check ...

  5. python简单C/S模式示例

    服务器端代码: #!/usr/bin/python import time, socket, threading # thread handle function def tcplink(sock, ...

  6. python 属性 property、getattr()、setattr()详解

    直奔主题 使用中文注释需要使用 #-*-coding:utf-8-*- property property在python中有2中使用property方法:1.@property @属性名称.sette ...

  7. Redis入门经典——The Little Redis Book （翻译）

    The Little Redis Book By Karl Seguin 关于本书:本书全然免费下载.你能够任意转载,复制.但请你注明作者.Karl Seguin.译者,WY. 以及不要用于商业用途. ...

  8. ueditor 控制上传图片的显示尺寸

    使用UEditor的编辑框插入图片的时候,如果图片尺寸比较大,则图片会超出编辑器边框出现滚动条,特别不方便. 解决办法:在ueditor 的 themes 文件夹下有个iframe.css 文件,在该 ...

  9. hdu5794 A Simple Chess 容斥+Lucas 从(1,1)开始出发，每一步从(x1,y1)到达(x2,y2)满足(x2−x1)^2+(y2−y1)^2=5, x2>x1,y2>y1; 其实就是走日字。而且是往(n,m)方向走的日字。还有r个障碍物，障碍物不可以到达。求(1,1)到(n,m)的路径条数。

    A Simple Chess Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...

  10. Unity3D游戏开发之游戏读/存档功能在Unity3D中的实现

    喜欢我的博客请记住我的名字:秦元培,我的博客地址是:http://qinyuanpei.com 转载请注明出处,本文作者:秦元培, 本文出处:http://blog.csdn.net/qinyuanp ...