今天打算用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. git merge rebase的区别及应用场景

    前两天和同事交流发现他在日常开发中跟上游保持同步每次都是用git pull操作,而我一直习惯git fetch然后rebase,发现这两种操作后的log是有些区别的.他每次pull操作之后都会自动生成 ...

  2. NativeViewer for VS2010

    记得非常久之前公布了一款能够在调试中可视化Mat数据的插件,只是仅仅能用于VS2012及以上.我用的是VS2010(笔记本跑10都卡的不得了,12不敢奢望),不免有些遗憾.非常高兴的say如今这个问题 ...

  3. 4.const

    const 放在*号的左边为指针常量,即:该指针所指向的内存空间不允许被修改.const放在*号的右边为常量指针,即:该指针的指向不允许被修改. 简单的说就是: 假设定义一个结构体 Teacher : ...

  4. Spring Boot全日志设置

    说在前面 这里日志分两种.一种是tomcat的输出(系统)日志,一种是自己定义的日志. 系统日志设置 目标 当springboot接收到请求时记录日志到文件中 实现 你只需要在你的绿叶applicat ...

  5. mount rootfs

    主要用到的命令为pivot_root,可man 8 pivot_root了解用法. 1. pivot_root - change the root filesystem pivot_root new_ ...

  6. Java HashMap中在resize()时候的rehash,即再哈希法的理解

    HashMap的扩容机制---resize() 虽然在hashmap的原理里面有这段,但是这个单独拿出来讲rehash或者resize()也是极好的. 什么时候扩容:当向容器添加元素的时候,会判断当前 ...

  7. Hibernate每个具体类一张表映射(使用注释）

    在每个类创建一张表的情况下, 表中不使用Null值的列. 这种方法的缺点是在子类表中创建了重复的列. 在这里,我们需要在父类中使用@Inheritance(strategy = Inheritance ...

  8. tcp/iP协议族——IP工作原理及实例具体解释（下）

     IP协议具体解释 上一篇文章文章主要介绍了IP服务的特点,IPv4头部结构IP分片.并用tcpdump抓取数据包,来观察IP数据报传送过程中IP的格式,以及分片的过程.本文主要介绍IP路由,IP ...

  9. windows无法设置防火墙

    无法打开防火墙,出现错误代码0x80070422,解决方法:windows开始键->运行->调出运行窗口,输入services.msc,(或者控制面板->管理工具->服务)找到 ...

  10. linux oracle error解决记录

    1.sqlplus / as sysdba后使用select instance_name,status from v$instance后出错: ERROR:ORA-01034: ORACLE not ...