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

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

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

<%@ page language="java" pageEncoding="UTF-8"%>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

 <head>

  <title>复选框全选/全不选/反选</title>

  <meta http-equiv="pragma" content="no-cache">

  <meta http-equiv="cache-control" content="no-cache">

  <meta http-equiv="expires" content="0">

  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

  <meta http-equiv="description" content="This is my page">

  <script type="text/javascript"

   src="<%=request.getContextPath()%>/js/jquery-1.3.1.js"></script>

  <script type="text/javascript"> 

  /**

   * 全选

   *

   * items 复选框的name

   */

  function allCkb(items){

     $('[name='+items+']:checkbox').attr("checked", true);

  }

     

  /**

   * 全不选

   *

   */

  function unAllCkb(){

     $('[type=checkbox]:checkbox').attr('checked', false);

  }

     

  /**

   * 反选

   *

   * items 复选框的name

   */

  function inverseCkb(items){

     $('[name='+items+']:checkbox').each(function(){

        //此处用jq写法颇显啰嗦。体现不出JQ飘逸的感觉。

     //$(this).attr("checked", !$(this).attr("checked"));

    

     //直接使用js原生代码，简单实用

     this.checked=!this.checked;

     });

  }

 

  </script>

 </head>

 

 <body>

       <input type='checkbox' name='ckb' value="0"/>白羊座

       <input type='checkbox' name='ckb' value="1"/>狮子座

       <input type='checkbox' name='ckb' value="2"/>水瓶座

       <input type='checkbox' name='ckb' value="3"/>射手座<br/>

       <input type="button" onclick="allCkb('ckb')" value="全　选"/>

    <input type="button" onclick="unAllCkb()" value="全不选"/>

    <input type="button" onclick="inverseCkb('ckb')" value="反　选"/>

 </body>

</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. Asp.Net之后台加载JS和CSS

    在Asp.Net开发时,用到的JS库.通用的CSS等,在许多页面都会用到,而每次都需要手动引入,相当麻烦,而且有时一旦忘了引用,还得找半天才能找到问题.那有没有什么办法能够一劳永逸的呢?答案是有的. ...

  2. More is better（MST)（求无向图中最大集合元素个数）

    More is better Time Limit:1000MS     Memory Limit:102400KB     64bit IO Format:%I64d & %I64u Sub ...

  3. php面试题之四——Linux部分（高级部分）

    四.Linux部分 1.请解释下列10个shell命令的用途(新浪网技术部) top.ps.mv.find.df.cat.chmod.chgrp.grep.wc top:该命令提供了实时对系统处理器状 ...

  4. [BZOJ1659][Usaco2006 Mar]Lights Out 关灯

    [BZOJ1659][Usaco2006 Mar]Lights Out 关灯 试题描述 奶牛们喜欢在黑暗中睡觉.每天晚上,他们的牲口棚有L(3<=L<=50)盏灯,他们想让亮着的灯尽可能的 ...

  5. DataSnap 用TStream 传递大数据 返回流大小为-1的情况

    DataSnap可以直接传递和返回TStream类型的参数,这点是很方便的.但是很多人发现好像大小稍微大点就工作不正常了,就变相使用其它类型转换来转换去,这样便利性就失去了. 官方有篇博客很详细的介绍 ...

  6. android dialog 模拟新浪、腾讯title弹框效果

    http://blog.csdn.net/jj120522/article/details/7764183 首先我们看一下新浪微博的效果(其它就是一个dialog):                点 ...

  7. ORM框架是什么

    ORM框架是什么 对象关系映射,目前数据库是关系型数据库  ORM 主要是把数据库中的关系数据映射称为程序中的对象 目前集中常见的ORM框架1  Nhibernate原因:用的比较多,资料也比较好找. ...

  8. IE8 不支持html5 placeholder的解决方案

    IE8不支持html5 placeholder的解决方法. /** * jQuery EnPlaceholder plug * version 1.0 2014.07.01戈志刚 * by Frans ...

  9. 【转】打造属于自己的Android Studio神器

    本文转载自:http://www.stormzhang.com/android/2015/05/26/android-tools/,并加以修改.黄色底部分是本人添加的内容. 一晃好久没更新博客了,最近 ...

  10. scrapy爬虫成长日记之创建工程-抽取数据-保存为json格式的数据

    在安装完scrapy以后,相信大家都会跃跃欲试想定制一个自己的爬虫吧?我也不例外,下面详细记录一下定制一个scrapy工程都需要哪些步骤.如果你还没有安装好scrapy,又或者为scrapy的安装感到 ...