今天打算用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. struts2学习笔记（一）

    1.搭建第一个struts2 app. web.xml  <?xml version="1.0" encoding="UTF-8"?> <we ...

  2. Mac+docker+flask

    1.先要保证mac电脑安装docker 安装的话可以通过命令brew install docker 安装成功后启动,docker 然后在终端执行docker version 或者docker info ...

  3. CentOS 6.5 X64 U盘启动盘制作

    本教程是在Linux系统下制件,可以使用虚拟机安装Linux 1.准备一个8G的U盘,在Linux下分成Fat32---500M----root, 剩下的分成Ext3 ----data,并格式化. 2 ...

  4. html块级元素与内联元素的区别

    1.  块级元素(block element): 概念理解:如果不用css控制,块级元素在文档流中以一行显示,及它所占的宽度为其父级元素所占的宽度,若超过宽度会重新另起一行显示,高度会随着内容高度的增 ...

  5. 美团HD(8)-利用NSPredicate匹配搜索结果

    监听文本框改变: DJSelectCityViewController.m /** 当searchBar内的文字发生改变时调用此方法 */ - (void)searchBar:(UISearchBar ...

  6. java - day05 - Array

    /* 生成随机数组,寻找最大值 */ package day05; public class ArrayGuess { public static void main(String args[]) { ...

  7. html中添加freemarker条件判断

    1.<#if isChanged==1>id="skin_${skins_index*skins?size+skin_index+1}"<#else>id= ...

  8. RTT驱动实现步骤

    设备驱动实现步骤: 1. 按照RT-Thread对象模型,扩展一对象有两种方式: 1)定义自己的私有数据结构,然后赋值到RT-Thread设备控制空的user_data指针上: 2)从struct r ...

  9. ACM Computer Factory - poj 3436 （最大流）

      Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5949   Accepted: 2053   Special Judge ...

  10. go开启多进程——拆分多个进程同时处理（分而治之）

    使用了goroutine实现了多线程,使用chan来控制多线程. runtime.GOMAXPROCS(3)来设置最大的原生线程. runtime.Gosched() 显式地让出CPU时间给其他gor ...