jquery -全选/反选

最新推荐文章于 2024-06-01 16:11:46 发布
最新推荐文章于 2024-06-01 16:11:46 发布
阅读量268 收藏
点赞数
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangxinqiang1129/article/details/8314088
版权
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery基础-3全选、反选</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
</head>

<body>
    <table width="50%" border="1" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="14%"><input type="checkbox" name="first" /></td>
    <td width="45%">1</td>
    <td width="41%">&nbsp;</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="nine" /></td>
    <td>2</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="second" /></td>
    <td>3</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="third" /></td>
    <td>4</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="four" /></td>
    <td>5</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="five" /></td>
    <td>6</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="six" /></td>
    <td>7</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="seven" /></td>
    <td>8</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="eight" /></td>
    <td>9</td>
    <td>&nbsp;</td>
  </tr>
</table>
    <div align="center">
      <input type="checkbox" id="all" />
      全选
      <input type="checkbox" id="invert" />
      反选
    </div>
</body>
</html>
<script>
    $(function(){
        //全选
        $("#all").on("click",function(){
            if(this.checked){
                $("table tr td input[type=checkbox]").attr("checked",true);
                $("#invert").attr('checked',false);
            }else{
                $("table tr td input[type=checkbox]").attr("checked",false);
            }
        });
        
        // 反选
        $("#invert").on("click",function() {
            if($("#all").attr('checked')=="checked"){
                $("#all").attr('checked',false);
            }   
            $('table tr td input[type=checkbox]').each( function() {     
                $(this).attr("checked", !$(this).attr("checked"));     
        });     
    });
        
    });
</script>

wangxinqiang1129
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现全选、反选、获得所有选中的checkbox
11-26
1、全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2、取消全选（全不选） $("#btn2").click(function(){ $("input[name='checkbox']").removeAttr("checked"); }...
解决JQuery全选/反选第二次失效的问题
10-19
在JavaScript和jQuery开发中，全选/反选功能是一个常见的需求，特别是在表格或者多选列表中。当用户点击一个主复选框（如“全选”按钮）时，所有子复选框应相应地被选中或取消选中。然而，在实际应用中，可能会遇到...
JQuery 实现 全选/反选/删除
tangyue1997的博客
06-14 172
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./jquery-1.7.2.min.js"></script> </head> &l...
jquery实现全选和反选
m0_56398485的博客
08-29 1609
需求：点击全选，后面所有checkbox状态选中，当后面有一个checkbox状态没有选中时，全选取消。当后面有所有checkbox状态选中时，前面全选状态选中 ，下面就为大家实现这个效果。大家用之前记得下载一下jquery文件哦。......
用 jQuery 实现全选/反选功能
qq_45093219的博客
05-26 1666
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
jQuery-全选/全部选/反选
heliuerya的博客
05-25 1487
input type="checkbox" name="items" value="羽毛球" />羽毛球。<input type="checkbox" name="items" value="乒乓球" />乒乓球。<input type="checkbox" name="items" value="足球" />足球。<input type="checkbox" name="items" value="篮球" />篮球。//全选/全部选复选框的状态也变成选中状态。//所有复选框的状态都变成选中状态。
jQuery实现全选和反选功能
qq_50587303的博客
01-23 959
使用jquery实现全选和全不选,反选
Jquery实现全选和反选
superliug的博客
11-03 888
Jquery实现全选和反选 简介 我们在开发的过程中一定对全选和反选很熟悉，这些功能都是伴随着我们的开发的道路上的，我们点击一个按钮就能实现对当前页的所有的数据进行全部选中或者取相反的数据的作用，我相信大家有很多的做法，每个人都认为自己的做法是最简单的做法，下面我也将给大家引入我自己的做法，希望给大家有所帮助 需求分析 1.从后台数据库中读出数据存到域对象中传到前台 2.数据从域对象中通过jstl...
Jquery Checkbox 全选/反选
dreamLeadToword的专栏
12-12 195
&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; &lt;meta http-equiv="content-type" content="text/html;charset=UTF-8"&gt; &lt;titl
【JQuery 实现 layui 复选框 全选/反选/清除的功能】
最新发布
离离火的博客
06-01 885
获取到渲染过的 div class=“layui-input-block” 里的 input 元素标签，改变其 checked属性。
jQuery实现全选，反选，取消操作
lf1949的博客
03-27 1977
jQuery全选、反选、取消题目代码展示 题目 代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jQuery/jquery-3.6.0.min.js"></script> <script> $(func
jquery 全选 取消全选 反选
中资上事的博客
05-12 310
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src='./jquery.min.js'></script> </head> <body...
Jquery 1.42 checkbox 全选和反选代码
10-29
在这个例子中，我们将详细解析如何使用jQuery 1.4.2版本实现复选框的全选和反选功能。 首先，我们需要引入jQuery库。在HTML代码中，可以看到引入了`jquery-1.4.2.min.js`文件，这是jQuery的核心库： ```html ...
jQuery 的全选、反选插件
05-01
本资源主要关注jQuery的全选与反选功能，这对于处理带有复选框的表单列表尤其有用。在很多情况下，用户可能需要一次性选择所有选项或者清除所有已选，这种功能在诸如数据筛选、批量操作等场景中十分常见。 首先，让...
indexOf() 与 jquery.inArray()
node的专栏
03-14 8902
indexOf() 与 jquery.inArray() 注意：IE6下不支持 indexOf() 1.indexOf ()      当无法确定在某个字符串中是否确实存在一个字符的时候,就可调用 indexOf() 和 lastIndexOf() 方法。     indexOf() 和 lastIndexOf() 方法返回的都是指定的子串在另一个字符串中的位置，如果没有找不到子串，则返回
jquery 文字(颜色)闪烁显示
node的专栏
04-07 5040
jquery 文字显示 .table-list-warp .tab-all tbody td {     background: none repeat scroll 0 0 #FFFFFF;     border: 1px solid #666666;     color: #333333;     padding: 4px;     text-align: center;
java-jquery(60秒发送短信验证码)源代码
node的专栏
10-25 4400
var _time = 60; function timedown( t ){ if( _time == 0 ){ t.removeAttribute("disabled"); t.value="免费获取验证码"; _time = 60; }else { t.setAttribute("disabled", true); t.value=""+_time+"秒后再次获取";
jquery-数组排序
node的专栏
08-05 4294
首页         首页      $(function(){             var _list = [1,3,5,7,10,6];         console.info(_list.sort());        //正序         console.info(_list.sort(function(a,b){return a-b
js-局部刷新（无缓存）
node的专栏
11-05 1880
方法1：（添加时间戳） 实例： html：                                                                                                 js：   $(function(){         $("#show_pk_info_box").load(( '

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值