jquery全选反选

最新推荐文章于 2023-07-18 11:18:07 发布
最新推荐文章于 2023-07-18 11:18:07 发布
阅读量202 收藏
点赞数
分类专栏： JavaScript/HTML5/CSS3

<!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>无标题文档</title>
</head>
<script language=javascript src="jquery.js"></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>
<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>

焚膏油以继晷，恒兀兀以穷年
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS全选与反选
qq_34082921的博客
09-10 1565
【代码】JS全选与反选的代码实现。
js中全选与反选
m0_58451019的博客
04-05 165
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 1734
这种情况在购物车中尤为常见
JavaScript实现全选和反选功能
weixin_51938823的博客
07-11 768
利用JS写了一个相对简单的全选和反选功能。
JavaScript 实现全选、全不选和反选功能
不抛弃、不放弃：Aaron莫言
07-18 1829
需要实现全选，首先需要获取到表单元素，将所有复选框表单元素放到一个数组。因为id属性值是唯一的，所以通过name属性或者class属性获取元素比较合适。得到数组后遍历，将所有checked值设置为true即可实现全选，全不选原理相同。反选遍历的时候判断如果checked值为true则改为false，checked值为false则改为true。的type属性为checkbox来创建多个复选框，input标签的type属性为button创建全选、全不选和反选按钮。
Jquery 全选反选实例代码
11-25
本文给大家分享一段基于jQuery的全选、反选和不选功能的代码，适用于网页多选后需要进行批量操作的场景（如批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希望可以帮到有需要的WEB爱好者...
jquery全选反选全不选案例
04-04
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
Jquery全选反选Checkbox
10-23
"Jquery全选反选Checkbox"是一个常见的功能需求，特别是在需要用户批量选择或取消选择多个选项的场景下。这个功能通常应用于表格、列表或其他数据展示组件，让用户能够快速地对一组复选框进行全选或反选操作。 首先...
jquery全选反选插件
06-18
本话题将深入探讨“jQuery全选反选插件”的相关知识点，这对于构建具有复选框全选和反选功能的用户界面非常有用。 首先，jQuery全选反选插件的核心功能是实现复选框的批量选择。在网页上，当用户需要对一组选项进行...
js全选和反选操作
sosadtoday的博客
11-18 262
js全选和反选操作
前端学习（146）：伪类选择器checked和disable和focus
歌谣的博客
12-18 618
<!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中全选,反选的实现
qq_41630673的博客
01-21 942
在页面中我们经常要对多条数据选择进行删除或者是选择所有的数据进行删除,如果我们使用jQuery的话,它灵活的选择器可以给我们带来很多方便: 比如我们要实现对下面这个表单的全选和反选功能 这个表单的代码 class="table table-hover"> id="all" type="checkbox" onclick="checkall()"/>全选
jQuery实现的全选、反选和不选功能
搞it的也有心情博客
04-20 745
本文给大家分享一段基于jQuery的全选、反选和不选功能的代码，适用于网页多选后需要进行批量操作的场景（如批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希望可以帮到有需要的WEB爱好者。 查看演示DEMO HTML 我们的页面上有一个歌曲列表，列出多行歌曲名称，并匹配复选框供用户选择，并且在列表下方有一排操作按钮。 id="list"> >> type
全选、反选、获取选中值
weixin_33675507的博客
06-19 317
<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"/><...
js实现 全选/反选 和 单选
周先森爱编程丶的博客
09-21 2133
描述一般用在后台管理数据，以及购物车批量操作 等多种情况JS代码：<script type="text/javascript"> function checkAll(){ //全选 和反选 以及 单选 //1.获取全选/反选元素 var all = document.getElementById("all"); //2.查找列表中每一项
Jquery实现全选和反选
superliug的博客
11-03 888
Jquery实现全选和反选 简介 我们在开发的过程中一定对全选和反选很熟悉，这些功能都是伴随着我们的开发的道路上的，我们点击一个按钮就能实现对当前页的所有的数据进行全部选中或者取相反的数据的作用，我相信大家有很多的做法，每个人都认为自己的做法是最简单的做法，下面我也将给大家引入我自己的做法，希望给大家有所帮助 需求分析 1.从后台数据库中读出数据存到域对象中传到前台 2.数据从域对象中通过jstl...
jquery全选反选不选
最新发布
12-20
以下是基于jQuery实现全选、反选和不选的代码示例： 1. 全选： ```javascript $("#selectAll").click(function(){ $("#checkBoxList :checkbox").prop("checked", true); }); ``` 2. 反选： ```javascript $("#...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值