随笔 - 1357  文章 - 0  评论 - 1104  阅读 - 1941万

利用jQuery实现CheckBox全选/全不选/反选

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

 

posted on   Ruthless  阅读(15945)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示