JQuery全选和反选

最新推荐文章于 2023-07-18 11:18:07 发布
最新推荐文章于 2023-07-18 11:18:07 发布
阅读量62 收藏
点赞数
分类专栏： JS 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/comeontony/article/details/83983211
版权

1.代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <TITLE> New Document </TITLE>
 <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
 <link href="css/ingrid.css" rel="stylesheet" type="text/css">
<script language="JavaScript" src="jquery.js" type="text/javascript"></script>
 <SCRIPT LANGUAGE="JavaScript">
<!--
    $("document").ready(function(){
    
     $("#all").click(function(){  
    if(this.checked){  
        $("input[name='checkbox']").each(function(){this.checked=true;});
 $("#btn1").attr("value","反选");  
    }else{  
        $("input[name='checkbox']").each(function(){this.checked=false;});  
        $("#btn1").attr("value","全选");
    }  
 }); 

     $("#btn1").click(function(){
        
       $("[name='checkbox']").attr("checked",'true');//全选
     
     })
     $("#btn2").click(function(){
         
         $("[name='checkbox']").removeAttr("checked");//取消全选
     
    })
       $("#btn3").click(function(){
         
        $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
     
      })
       $("#btn4").click(function(){
         
         $("[name='checkbox']").each(function(){
            
           
             if($(this).attr("checked"))
            {
              $(this).removeAttr("checked");
             
            }
           else
           {
             $(this).attr("checked",'true');
              
          }
         
         })
      
       })
        $("#btn5").click(function(){
      var str="";
          $("[name='checkbox'][checked]").each(function(){
             str+=$(this).val()+"\r\n";
         })
       alert(str);
    })
      })
 //-->
 </SCRIPT>
 
</HEAD>

<BODY>
<form name="form1" method="post" action="">
  <input type="checkbox" id="all" name="all">
  <input type="button" id="btn1" value="全选">
  <input type="button" id="btn2" value="取消全选">
   <input type="button" id="btn3" value="选中所有奇数">
  <input type="button" id="btn4" value="反选">
  <input type="button" id="btn5" value="获得选中的所有值">
   <br>
  <input type="checkbox" name="checkbox" value="checkbox1">
  checkbox1
   <input type="checkbox" name="checkbox" value="checkbox2">
 checkbox2
   <input type="checkbox" name="checkbox" value="checkbox3">
  checkbox3
   <input type="checkbox" name="checkbox" value="checkbox4">
   checkbox4
  <input type="checkbox" name="checkbox" value="checkbox5">
   checkbox5
   <input type="checkbox" name="checkbox" value="checkbox6">
   checkbox6
  <input type="checkbox" name="checkbox" value="checkbox7">
  checkbox7
   <input type="checkbox" name="checkbox" value="checkbox8">
 checkbox8
 </form>

 </BODY>
</HTML>

2.效果

JQuery全选和反选 - hbluojiahui - hbluojiahui的博客

comeontony
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS全选与反选
qq_34082921的博客
09-10 1559
【代码】JS全选与反选的代码实现。
js中全选与反选
m0_58451019的博客
04-05 163
window.onload = function (){ document.getElementById("all_select").onclick = function (){ var Hobby = document.getElementsByName("hobby"); for(i = 0; i < Hobby.length; i++){ Hobby[i].checked = this.value; } .
【JavaScript】实现全选和反选功能
weixin_62012986的博客
11-26 1733
这种情况在购物车中尤为常见
JavaScript实现全选和反选功能
weixin_51938823的博客
07-11 763
利用JS写了一个相对简单的全选和反选功能。
JavaScript 实现全选、全不选和反选功能
最新发布
不抛弃、不放弃：Aaron莫言
07-18 1804
需要实现全选，首先需要获取到表单元素，将所有复选框表单元素放到一个数组。因为id属性值是唯一的，所以通过name属性或者class属性获取元素比较合适。得到数组后遍历，将所有checked值设置为true即可实现全选，全不选原理相同。反选遍历的时候判断如果checked值为true则改为false，checked值为false则改为true。的type属性为checkbox来创建多个复选框，input标签的type属性为button创建全选、全不选和反选按钮。
Jquery 1.42 checkbox 全选和反选代码
10-29
在这个例子中，我们将详细解析如何使用jQuery 1.4.2版本实现复选框的全选和反选功能。 首先，我们需要引入jQuery库。在HTML代码中，可以看到引入了`jquery-1.4.2.min.js`文件，这是jQuery的核心库： ```html ...
jquery实现简单的全选和反选功能
10-23
我们在做项目的时候，经常需要实现全选和反选功能，到网上搜了一圈，发现网上写的全选的代码，不是完整的，是有bug的。下面结合自己的项目给大家分享下。
jQuery实现全选、反选和不选功能
12-29
本文给大家分享一段基于jQuery的全选、反选和不选功能的代码，适用于网页多选后需要进行批量操作的场景（如批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希望可以帮到有需要的WEB爱好者...
jquery 实现的全选和反选
10-30
在本示例中，我们将详细探讨如何使用 jQuery 实现全选和反选的功能，这对于批量操作表格中的复选框非常有用。 首先，我们需要一个包含复选框的表格结构。在提供的代码中，我们看到一个简单的 HTML 表格，其中每一行...
Jquery 全选反选实例代码
11-25
本文给大家分享一段基于jQuery的全选、反选和不选功能的代码，适用于网页多选后需要进行批量操作的场景（如批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希望可以帮到有需要的WEB爱好者...
js实现全选和反选功能
10-25
js实现全选和反选功能 js实现全选和反选功能 js实现全选和反选功能 js实现全选和反选功能 js实现全选和反选功能
js全选和反选操作
sosadtoday的博客
11-18 261
js全选和反选操作
前端学习（146）：伪类选择器checked和disable和focus
歌谣的博客
12-18 616
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
jQuery实现的全选、反选和不选功能
搞it的也有心情博客
04-20 744
本文给大家分享一段基于jQuery的全选、反选和不选功能的代码，适用于网页多选后需要进行批量操作的场景（如批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希望可以帮到有需要的WEB爱好者。 查看演示DEMO HTML 我们的页面上有一个歌曲列表，列出多行歌曲名称，并匹配复选框供用户选择，并且在列表下方有一排操作按钮。 id="list"> >> type
全选、反选、获取选中值
weixin_33675507的博客
06-19 313
<html><head><title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> ...
jQuery实现全选，全部选，反选
07-31 816
状态 用户名 赵 钱 孙 李 周 $("input[type=button]:eq(0)").click(function(){ $("input[type=checkbox]").attr(
Jquery : jquery实现checkbox的全选和反选
webEvelement的博客
03-27 389
html: <body> name:<input type="checkbox" name="name"/><br /> name:<input type="checkbox" name="name"/><br /> name:<input type="checkbox" name="name"/><...
Jquery实现全选和反选
superliug的博客
11-03 883
Jquery实现全选和反选 简介 我们在开发的过程中一定对全选和反选很熟悉，这些功能都是伴随着我们的开发的道路上的，我们点击一个按钮就能实现对当前页的所有的数据进行全部选中或者取相反的数据的作用，我相信大家有很多的做法，每个人都认为自己的做法是最简单的做法，下面我也将给大家引入我自己的做法，希望给大家有所帮助 需求分析 1.从后台数据库中读出数据存到域对象中传到前台 2.数据从域对象中通过jstl...
jquery实现全选和反选
05-18
可以使用以下代码实现全选和反选的功能： ```javascript // 全选 $("#checkAll").click(function(){ $("input[type='checkbox']").prop("checked", true); }); // 反选 $("#checkReverse").click(function(){ $...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值