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

最新推荐文章于 2021-03-19 20:47:08 发布
最新推荐文章于 2021-03-19 20:47:08 发布
阅读量103 收藏
点赞数
文章标签： javascript java ViewUI

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>

 

weixin_33982670
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用jQuery实现CheckBox全选/全不选/反选的简单代码
11-24
jQuery有些版本中实现CheckBox全选/全不选/反选会有bug，经测试jquery-1.3.1.js–>测试通过，jquery-1.5.1.js–>测试不通过。 实现CheckBox全选/全不选/反选代码如下： <%@ page language="java" ...
Js/Jquery 实现checkbox全选，反选，全不选
03-31
在提供的文件“js实现checkbox全选，反选，全不选.htm”中，应当包含了上述功能的具体实现。通过查看源码，我们可以了解到实际的HTML结构以及jQuery脚本是如何与之配合的。这个文件可以作为一个示例，帮助我们更好地...
使用jquery实现checkbox的全选
刹那芳华的专栏
08-31 172
[code="java"] jQuery实现CheckBox全选、全不选 $(function() { $("#checkAll").click(function() { $('input[name="subBox"]').attr("checked",this.checked); }); var ...
利用jQuery实现全选、全不选、反选(checkBox)
weixin_33932129的博客
02-06 169
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="jquery-1.8.3.js"></script></head><body><input type="checkBox...
jQuery实现checkbox全选和反选
【设计改变世界】github地址：https://github.com/guochunyang2004
04-03 497
$(document).ready(function() { $("#checkedAll").click(function(){  if($(this).attr("checked") == true){ //check all   $("input[@name=checkbox_name[]]").each(function(){    $(this).attr("checked",tru
jQuery实现checkbox全选
小学生
02-22 125
反选补充： $(this).attr("checked",!$(this).attr("checked"));   第一种   $(function() { $("#selectall").click(function() { $("input[@name='shareuser[]']").each(function() { $...
jQuery实现checkbox全选功能
KobeSacre的博客
03-10 1293
// 实现全选功能 $("#summaryBox").click(function() { // 查看当前全选是否被选中 var status = this.checked; // 根据status来设置其他多选框的状态 $(".itemBox").prop("checked", status); }); // 当本页所有用户被选中时，全选会自动选中 $("#rolePageBody").on("click", ".itemBox", funct
jquery一键控制checkbox全选、反选或全不选
10-19
主要为大家详细介绍了jquery一键控制checkbox全选、反选或全不选，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jquery实现全选、反选、获得所有选中的checkbox
11-26
2、取消全选（全不选） $("#btn2").click(function(){ $("input[name='checkbox']").removeAttr("checked"); }) 3、选中所有奇数 $("#btn3").click(function(){ $("input[name='checkbox']:odd").attr("check
jquery实现checkbox全选
weixin_30596343的博客
08-07 47
代码 1<head>2<title>JQuery实现全选</title>3<scriptlanguage="javascript"type="text/javascript"src="file:///G:/programming/js/jQuery1.3.2/jquery-1.3.2.min.js">...
JQuery实现checkbox的全选取消全选
10-18
JQuery实现checkbox的全选取消全选
jQuery实现checkbox 全选,全不选功能
hao316068545的专栏
09-15 474
jsp代码 //表头代码 报警名称 最小值 下限值 上限值 最大值 当前值 报警状态 报警时间 ---------------------------------------------------------------------------- Script 代码 //原始数据生成代码 function getData() {
用jquery来实现checkbox的全选与全不选
qq_42209630的博客
05-16 2658
HTML结构:&lt;ul&gt; &lt;li&gt; &lt;input type="checkbox" class="thead"&gt;全选或全不选 &lt;/li&gt; &lt;li&gt; &lt;ol&gt; &lt;li&g
jQuery实现CheckBox全选、全不选
笨小葱的专栏
08-30 457
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
用JQuery 实现的全选 反选 全不选
Larvae_的博客
03-19 127
** 用JQuery 实现的全选 反选 全不选 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title&g
Jquery checkbox 全选 反选 全不选
weixin_34032621的博客
04-21 60
<button class="button info mini rounded" id="selectAll">全选</button> | <button class="button warning mini rounded" id="reverse">反选</button> | <button class="button alert m...
使用jquery完成九九乘法表、全选/全不选、反选功能、轮播图
最新发布
07-28
以下是使用 jQuery 实现九九乘法表、全选/全不选、反选功能和轮播图的示例代码： 1. 九九乘法表： ```html <!DOCTYPE html> 九九乘法表</title> <script src="https://code.jquery....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值