转自：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. 如何使用vim的帮助功能

    set guioptions+-=m/T 更换vim的默认color schema: 将下载的color.vim文件如sonofob'sidian.vim放到/usr/share/vim/vimfil ...

  2. [转]优化wp_head()

    经过对head的优化,我的博客访问速度也快了好多,在此过程中也了解到wp_head()模板函数的作用,可以再次优化,特此记录. 步骤:加入到function.phpremove_action(‘wp_ ...

  3. 推迟调用以及Lambda表达式

    背景 GMock 我们项目中现在的模块测试框架使用了CATCH+GMock的方式实现回归测试和打桩. GMock的介绍在官网上有,这里为了铺垫,大概地描述一下GMock能实现的效果.大约可以看成这样: ...

  4. Spring各个jar包的简介

    spring.jar是包含有完整发布的单个jar 包,spring.jar中包含除了spring-mock.jar里所包含的内容外其它所有jar包的内容,因为只有在开发环境下才会用到 spring-m ...

  5. C#结构体和类的区别

    1.不能在结构体中定义默认构造方法: 2.在结构体中的非默认构造方法中,必须对结构体中所有的字段进行初始化,否则将报错. 3.在类中声明字段的同时,可以初始化,字段的值.在结构体中不可以. 4.结构体 ...

  6. 浅谈B树

    B树即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: 如:    ...

  7. Linux_DHCP服务搭建

    Linux网络参数的设置 1.        修改主机名 # vim /etc/sysconfig/network NETWORKING=yes HOSTNAME=bj.com 2.        修 ...

  8. python-twisted

    环境:win7 64位,python 2.7.3 安装: http://twistedmatrix.com/Releases/Twisted/14.0/Twisted-14.0.0.win-amd64 ...

  9. win7安装ubuntu后，进入不了win7

    方法一:进去ubuntu系统后,终端下输入如下命令:sudo update-grub,输入命令后,会提示寻找win7,ubuntu系统.并自动建立引导详情链接:http://zhidao.baidu. ...

  10. 查看Eclipse中的jar包的源代码：jd-gui.exe

    前面搞了很久的使用JAD,各种下载插件,最后配置好了,还是不能用,不知道怎么回事, 想起一起用过的jd-gui.exe这个工具,是各种强大啊!!! 只需要把jar包直接扔进去就可以了,非常清晰,全部解 ...