zoukankan      html  css  js  c++  java
  • 利用jQuery实现CheckBox全选/全不选/反选

    转自: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>
    复制代码

  • 相关阅读:
    idea 使用 maven 下载 jar 包,出现证书校验问题问题
    接口抽象类区别,Java中IO,BIO、NIO、AIO区别以及Files的常用方法
    JIT编译器,Java平台的不同及Java一次编写,随处运行
    什么是Java虚拟机,JVM分配的不同类型内存区域是什么?
    AOP底层原理及AOP操作
    抽象类能使用 final 修饰吗?
    抽象类必须要有抽象方法吗?
    String 类的常用方法都有那些?
    普通类和抽象类有哪些区别?
    如何将字符串反转?
  • 原文地址:https://www.cnblogs.com/lvchenfeng/p/5295842.html
Copyright © 2011-2022 走看看