今天打算用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. 从第三方Launcher授权启动指定APP的设计与实现

    Case 背景: Case要求从第三方Launcher中首次启动指定的应用程序时.弹出对话框提示用户进行授权启动,若用户未授权,则在下次再次启动该应用时依旧弹出对话框提示用户进行授权.直到用户相应用进 ...

  2. Atitit..net clr il指令集 以及指令分类  与指令详细说明

    Atitit..net clr il指令集 以及指令分类  与指令详细说明 1.1. .NET CLR 和 Java VM 都是堆叠式虚拟机器(Stack-Based VM), 1 1.2. 查看工具 ...

  3. Win7安装.Net framework 3.5时出错的某解决办法

    情况: Win7卸载了.Net Framework 3.5后, 做了些盘符的Symlink操作, 将一些大文件从C盘移到D盘. 再次安装.Net 3.5时, 怎么都装不上, 直接下载离线安装包, 一装 ...

  4. InputArray和OutputArray

    源码路径:~/opencv-2.4.9/modules/core/include/opencv2/core/core.hpp where _InputArray is a class that can ...

  5. 如何设置esxi的网卡与网络

    很多朋友安装了vmware esxi后,不懂得服务器上的网卡该如何设置以及如何使用,我们在这里来介绍一下vmware esxi的网卡设置 工具/原料   一台服务器,配有两块千兆网卡 在服务器安装好v ...

  6. 记录下push推送优化改进点

    一)自主研发的push服务的特点及优势: 1) 消息回执确认(ack); 2) 有效期推送(设置消息的有效期); 3) 精准推送(设置设备组别推送); 4) 下发任务分解(拆分任务,多进程); 5) ...

  7. TP id 对字符串的查找

    // 还剩的图片的id $oldPid = implode(',', $_POST['OldGoodsPic']); // 从数据库中找需要出删除了的 FIND_IN_SET(id,'$oldPid' ...

  8. Shell脚本之监视指定进程的执行状态

    在之前的博客中,以前写了自己主动化測试程序的实现方法,如今开发人员须要知道被測试的进程(在此指执行在LINUX上的主进程的)在异常退出之前的进程的执行状态,比如内存的使用率.CPU的使用率等. 现用s ...

  9. libsvm easy.py ValueError: need more than 0 values to unpack windows下终极解决

    现象是: python easy.py train test 输出: Scaling training data...WARNING: original #nonzeros 100389 new #n ...

  10. git undo last commit

    $ git commit -m "Something terribly misguided" (1) $ git reset --soft HEAD~ (2) << e ...