当前位置: 首页 > 编程笔记 >

利用jQuery实现CheckBox全选/全不选/反选的简单代码

徐帅
2023-03-14
本文向大家介绍利用jQuery实现CheckBox全选/全不选/反选的简单代码,包括了利用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>

以上这篇利用jQuery实现CheckBox全选/全不选/反选的简单代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍jQuery Checkbox 全选 反选的简单实例,包括了jQuery Checkbox 全选 反选的简单实例的使用技巧和注意事项,需要的朋友参考一下 1.全选、反选 以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持呐喊教程!

  • 本文向大家介绍jQuery 全选 全部选 反选 实现代码,包括了jQuery 全选 全部选 反选 实现代码的使用技巧和注意事项,需要的朋友参考一下 1.概述 在项目中经常遇到列表中对复选框进行勾选操作,全选。。。反选。。 2. example 以上所述是小编给大家介绍的jQuery 全选 全部选 反选 实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢

  • 本文向大家介绍jQuery实现checkbox列表的全选、反选功能,包括了jQuery实现checkbox列表的全选、反选功能的使用技巧和注意事项,需要的朋友参考一下   我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如:   我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的id,class,现在想

  • 本文向大家介绍jquery实现简单的全选和反选功能,包括了jquery实现简单的全选和反选功能的使用技巧和注意事项,需要的朋友参考一下 首先我们看个简单的实例 下面再给大家分享一段基于jQuery实现checkbox列表全选、反选和不选功能的代码,适用于网页多选后需要进行批量操作的场景(如批量删除等)。文章结合实例,代码简洁,基本覆盖选项选择操作的方方面面,希望可以帮到有需要的前端开发爱好者。 引

  • 本文向大家介绍Android RecycleView使用(CheckBox全选、反选、单选),包括了Android RecycleView使用(CheckBox全选、反选、单选)的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了CheckBox全选、反选、单选的具体代码,供大家参考,具体内容如下 MainActiivity Adapter main.xml Check.xml 以上就是

  • 本文向大家介绍js与jQuery实现checkbox复选框全选/全不选的方法,包括了js与jQuery实现checkbox复选框全选/全不选的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法。分享给大家供大家参考,具体如下: 先来看看JavaScript实现checkbox复选框全选/全不选的方法。这应该是一个比较实用的前端