导航首页 » 技术教程 » 利用jQuery实现CheckBox全选/全不选/反选的简单代码
全站头部文字 我要出现在这里
利用jQuery实现CheckBox全选/全不选/反选的简单代码 313 2024-03-01   

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="http://www.gimoo.net/t/1902/<%=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写法颇显??隆L逑植怀?Q飘逸的感觉。
   //$(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全选/全不选/反选的简单代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持绿夏网。



!!!站长长期在线接!!!

网站、小程序:定制开发/二次开发/仿制开发等

各种疑难杂症解决/定制接口/定制采集等

站长微信:lxwl520520

站长QQ:1737366103