转自：http://www.cnblogs.com/linjiqin/p/3148259.html

jQuery有些版本中实现CheckBox全选/全不选/反选会有bug，经测试jquery-1.3.1.js–>测试通过，jquery-1.5.1.js–>测试不通过。

实现CheckBox全选/全不选/反选代码如下：

  1. <%@ page language="java" pageEncoding="UTF-8"%>
  2.  
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4. <html>
  5.  <head>
  6.   <title>复选框全选/全不选/反选</title>
  7.   <meta http-equiv="pragma" content="no-cache">
  8.   <meta http-equiv="cache-control" content="no-cache">
  9.   <meta http-equiv="expires" content="0">
  10.   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  11.   <meta http-equiv="description" content="This is my page">
  12.   <script type="text/javascript"
  13.    src="<%=request.getContextPath()%>/js/jquery-1.3.1.js"></script>
  14.   <script type="text/javascript"> 
  15.   /**
  16.    * 全选
  17.    *
  18.    * items 复选框的name
  19.    */
  20.   function allCkb(items){
  21.      $('[name='+items+']:checkbox').attr("checked", true);
  22.   }
  23.      
  24.   /**
  25.    * 全不选
  26.    *
  27.    */
  28.   function unAllCkb(){
  29.      $('[type=checkbox]:checkbox').attr('checked', false);
  30.   }
  31.      
  32.   /**
  33.    * 反选
  34.    *
  35.    * items 复选框的name
  36.    */
  37.   function inverseCkb(items){
  38.      $('[name='+items+']:checkbox').each(function(){
  39.         //此处用jq写法颇显啰嗦。体现不出JQ飘逸的感觉。
  40.      //$(this).attr("checked", !$(this).attr("checked"));
  41.     
  42.      //直接使用js原生代码，简单实用
  43.      this.checked=!this.checked;
  44.      });
  45.   }
  46.  
  47.   </script>
  48.  </head>
  49.  
  50.  <body>
  51.        <input type='checkbox' name='ckb' value="0"/>白羊座
  52.        <input type='checkbox' name='ckb' value="1"/>狮子座
  53.        <input type='checkbox' name='ckb' value="2"/>水瓶座
  54.        <input type='checkbox' name='ckb' value="3"/>射手座<br/>
  55.        <input type="button" onclick="allCkb('ckb')" value="全　选"/>
  56.     <input type="button" onclick="unAllCkb()" value="全不选"/>
  57.     <input type="button" onclick="inverseCkb('ckb')" value="反　选"/>
  58.  </body>
  59. </html>

利用jQuery实现CheckBox全选/全不选/反选的更多相关文章

  1. jquery操作checkbox方法（全选、全不选、至少选择一个、选择值/文本）

    原文:http://blog.csdn.net/u014079773/article/details/52371382 在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值, ...

  2. jquery实现checkbox列表的全选不选

    html代码 <th><input type="checkbox" onclick="selectAll(this);" />全选/取消 ...

  3. 【jQuery】CheckBox使用attr全选无法正确显示

    今天编写JS脚本时,遇到如下的问题. 下面是源代码: <script src="../Scripts/jquery-2.1.3.js"></script> ...

  4. Jquery 利用单个复选款（checkbox）实现全选、反选

    1 <script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").clic ...

  5. 解决jquery操作checkbox全选全不选无法勾选问题

    最近在学习中使用jquery操作checkbox,使用下面方法进行全选.反选:$("input[name='checkbox']").attr("checked" ...

  6. jquery实现checkbox全选和全部取消，以及获取值

    在后台管理中经常会遇到列表全选和取消的功能,如评论审核.申请等,用到的html标记就是checkbox.我用的是mysql数据库,代码如下: <!DOCTYPE html PUBLIC &quo ...

  7. jquery实现checkbox的全选

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> < ...

  8. jQuery实现Checkbox中项目开发全选全不选的使用

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  9. jQuery实现CheckBox全选、全不选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. “System.Transactions.Diagnostics.DiagnosticTrace”的类型初始值设定项引发异常[WCF]

    未处理System.TypeInitializationException  HResult=-2146233036  Message=“System.ServiceModel.Diagnostics ...

  2. smarty 操作符号，大于、小于。。。

    eq相等,6 w% x7 w6 |3 _ne.neq不相等,( i" }" ~( `# V( t& C, k; [gt大于,lt小于,gte.ge大于等于,lte.le 小 ...

  3. unity StreamingAssets路径

    原地址:http://blog.csdn.net/nateyang/article/details/8493791 我们在读写例如XML和TXT文件的时候,在电脑上和手机上路径不一致,造成了很多麻烦, ...

  4. Windows Server 2012 GUI与Core的切换

    Server Core是在Windows Server 2008 系统上开始引入的极小的服务器安装选项,server core 的作用就是为特定的服务提供一个可执行的功能有限的低维护服务器环境,为我们 ...

  5. 坚持不懈之linux haproxy的配置文件关键字查询手册

    1.关键词balance balance用于定义负载均衡的算法,可用于defaults.listen和backend中. balance使用方法如下: balance <algorithm> ...

  6. ubuntu上完全卸载package

    inux上完整的卸载apt方式安装软件的办法. 假设你的包叫做: your_pkg apt-get --purge remove your_pkg apt-get autoremove apt-get ...

  7. 用sed删除空行

    用sed删除空行 我的代码如下:class Song def initialize(name)        @name = name    end def tell        puts @nam ...

  8. Android Studio项目引入外部库注意事项(PullToRefresh)

    Android Studio开发App项目时引入第三方库是个比较麻烦的事情.之前导入Volley就折腾了好久,导入下拉刷新控件PullToRefresh时又碰到了各种问题.在此记录一下,以便查阅. 一 ...

  9. WPF 将PPT,Word转成图片

    在Office下,PowerPoint可以直接把每张幻灯片转成图片,而Word不能直接保存图片.所以只能通过先转换成xps文件,然后再转成图片. 一.PPT 保存为图片 /// <summary ...

  10. Gym 100801E Easy Arithmetic (思维题)

    题目:传送门.(需要下载PDF) 题意:给定一个长度不超过1000的字符串表达式,向该表达式中加入'+'或'-',使得表达式的值最大,输出该表达式. 题解:比如300-456就改成300-4+56,遇 ...