js/jQuery常见操作 之 jQuery操作复选框的常见问题

js/jQuery常见操作 之 jQuery操作复选框的常见问题

  • 1. js/jQuery的其他一些常见基础操作
  • 2. 全选/全不选问题
    • 2.1 效果
    • 2.2 实现代码
      • 2.2.1 简单js实现
      • 2.2.2 jQuery实现
        • 2.2.2.1 注意语法(区别jQuery版本)
        • 2.2.2.2 完整代码实现
  • 3. jQuery实现点击 行tr 实现checkBox选中 + 翻页勾选问题
    • 3.1 jQuery实现点击 行tr 获取td中checkBox的值
      • 3.1.1 方式1
      • 3.1.2 方式2
    • 3.2 jQuery实现点击 行tr 实现checkBox选中或取消
      • 3.2.1 点击 tr 时,checkbox选中或取消
      • 3.2.2 点击 首行tr 时,实现全选或全不选
      • 3.2.3 点击非首行tr时(数据列表行),全选或全不选自动切换
    • 3.3 翻页勾选问题
    • 3.4 附上述操作tr的全代码

1. js/jQuery的其他一些常见基础操作

  • js/jQuery 的一些常用操作(js/jQuery获取表单元素值 以及 清空元素值的各种实现方式)——附测试例子,拿来即能实现效果.

2. 全选/全不选问题

2.1 效果

  • 如下:
    在这里插入图片描述

2.2 实现代码

2.2.1 简单js实现

  • 如下:
    <!DOCTYPE html>
    <html><head><meta charset="utf-8"><title></title></head><body><form method="post" action="">您想饲养的狗狗有?<input type="checkbox" id="checkAllOrNo"/>全选/全不选<br /><input type="checkbox" name="items" value="边牧"/>边牧<input type="checkbox" name="items" value="柯基"/>柯基<input type="checkbox" name="items" value="秋田犬"/>秋田犬<input type="checkbox" name="items" value="金毛"/>金毛<br /><input type="button" id="checkAll" value="全选"/><input type="button" id="checkNoOne" value="全不选"/><input type="button" id="fanxuan" value="反选"/><input type="button" id="btnAllOrNO" value="全选/全不选"/><input type="button" id="commit" value="提交"/></form><script type="text/javascript">//1. 全选var all = document.getElementById("checkAll");function funAll(){var box = document.getElementsByName("items");for(var i =0;i<box.length;i++){// alert(box[i].value);box[i].checked = true;}}all.onclick = funAll;//2.全不选var allNo = document.getElementById("checkNoOne");function funAllNo(){var box = document.getElementsByName("items");for(var i =0;i<box.length;i++){box[i].checked = false;}}allNo.onclick = funAllNo;//3.反选(直接取反)var fan = document.getElementById("fanxuan");fan.onclick = function(){var box = document.getElementsByName("items");for(var i =0;i<box.length;i++){	// if(box[i].checked == false){// 	box[i].checked = true;// }else{// 	box[i].checked = false;// }//可以将整个if else优化为,如下:box[i].checked = !box[i].checked;//直接取反}}//4.全选/全不选----按钮操作var btn_check_all = document.getElementById("btnAllOrNO");btn_check_all.onclick = function(){var boxes = document.getElementsByName("items");var flag = false;//false-全不选  true-全选for(var i =0; i<boxes.length; i++){if(boxes[i].checked == false){flag = true;//只要存在没有选中的话,就进行反选break;}}// alert(flag);if(flag){//执行全选函数funAll();}else{//执行全不选函数funAllNo();}}//5 全选/全不选——复选框操作//5.1 点击全选复选框var checkAllOrNo_2 = document.getElementById("checkAllOrNo");//复选框全选/全不选checkAllOrNo_2.onclick = function(){var box = document.getElementsByName("items");for(var i =0; i<box.length; i++){box[i].checked = this.checked;//即:选中状态与全选/全不选的复选框保持一致即可}}//5.2 点击各项目复选框var boxAll_2 = document.getElementsByName("items");for(var i=0;i<boxAll_2.length;i++){boxAll_2[i].onclick = function(){checkAllOrNo_2.checked = true;//点击任何一个复选框,全选复选框都先设置为选中状态for(var i=0; i<boxAll_2.length; i++){if(boxAll_2[i].checked == false){//只要有没有选中,全选复选框就设置未选中checkAllOrNo_2.checked = false;break;}}}}//6.提交 获取选中的复选框var data = document.getElementById("commit");data.onclick = function(){var box = document.getElementsByName("items");var commmitData = "";for(var i =0; i<box.length; i++){if(box[i].checked == true ){commmitData += box[i].value + ",";}}var resultData = commmitData.substring(0,commmitData.length-1);alert(resultData);}</script></body>
    </html>
    

2.2.2 jQuery实现

2.2.2.1 注意语法(区别jQuery版本)
  • 下面以全选为例,如下:
    • 复杂写法:
      //1. 全选---复杂点写法
      var all = document.getElementById("checkAll");
      function funAll(){// 1.1 循环处理$("input[name='items']").each(function(){// 下面两种写法高低版本的jQuery均可以// $(this).attr("checked",true); this.checked = true;// prop 适合高版本的jQuery//$(this).prop("checked",true);});// 1.2 直接根据name处理// $("input[name='items']").attr("checked", true);// 注意:prop 适合高版本的jQuery// $("input[name='items']").prop("checked", true); 
      }
      all.onclick = funAll;
      
    • 优化写法:
      $("#checkAll").click(function(){$("input[name='items']").attr("checked", true);
      });
      
  • 再以全选/全不选为例(非按钮的情况),如下:
    • 点击 全选/全不选 ——复杂点逻辑:
      //5.1.1 点击 全选/全不选 复选框---使用多层this
      $("#checkAllOrNo").click(function(){var parentFlag = this.checked;$("input[name='items']").each(function(){this.checked = parentFlag;});
      });
      
    • 点击 全选/全不选 ——简单点逻辑
      //5.1.2 点击 全选/全不选 复选框----使用s(":checked")
      $("#checkAllOrNo").click(function(){$("input[name='items']").each(function(){this.checked = $("#checkAllOrNo").is(":checked");});
      });
      
    • 点击各项目:
      //5.2 点击各项目复选框
      $("input[name='items']").each(function(){$(this).click(function(){// 点击任何一个复选框,全选/不全选 复选框都先设置为选中状态$("#checkAllOrNo").attr("checked",true);// 然后再循环所有的复选框,是否有未选中的$("input[name='items']").each(function(){if(!this.checked){$("#checkAllOrNo").attr("checked",false);return;}});});
      });
      
  • 关于jQuery版本的一些可以看下面的文章,3.6中有介绍,
    js/jQuery 的一些常用操作(js/jQuery获取表单元素值 以及 清空元素值的各种实现方式)——附测试例子,拿来即能实现效果.
2.2.2.2 完整代码实现
  • 各情况代码,如下:
    <!DOCTYPE html>
    <html><head><meta charset="utf-8"><title></title><!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.3.2/jquery.min.js"></script></head><body><form method="post" action="">您想饲养的狗狗有?<input type="checkbox" id="checkAllOrNo"/>全选/全不选<br /><input type="checkbox" name="items" value="边牧"/>边牧<input type="checkbox" name="items" value="柯基"/>柯基<input type="checkbox" name="items" value="秋田犬"/>秋田犬<input type="checkbox" name="items" value="金毛"/>金毛<br /><input type="button" id="checkAll" value="全选"/><input type="button" id="checkNoOne" value="全不选"/><input type="button" id="fanxuan" value="反选"/><input type="button" id="btnAllOrNO" value="全选/全不选"/><input type="button" id="commit" value="提交"/></form><script type="text/javascript">//1. 全选---复杂点写法var all = document.getElementById("checkAll");function funAll(){// 1.1 循环处理$("input[name='items']").each(function(){// 下面两种写法高低版本的jQuery均可以// $(this).attr("checked",true); this.checked = true;// prop 适合高版本的jQuery//$(this).prop("checked",true);});// 1.2 直接根据name处理// $("input[name='items']").attr("checked", true);// 注意:prop 适合高版本的jQuery// $("input[name='items']").prop("checked", true); }// all.onclick = funAll;// 1. 全选---简单点写法$("#checkAll").click(function(){$("input[name='items']").attr("checked", true);});//2.全不选$("#checkNoOne").click(function(){$("input[name='items']").attr("checked", false);});//3.反选(直接取反)$("#fanxuan").click(function(){$("input[name='items']").each(function(){this.checked = !(this.checked);//直接取反});});//4.全选/全不选----按钮操作$("#btnAllOrNO").click(function(){var selectedNum = 0;//0-全不选  >0-全选$("input[name='items']:not(:checked)").each(function(){selectedNum ++;//计算没有选中的项目个数});if(selectedNum > 0){// 只要存在没有选中的话,就进行全选$("input[name='items']").attr("checked", true);}else{// 全不选$("input[name='items']").attr("checked", false);}});//5 全选/全不选——复选框操作//5.1.1 点击 全选/全不选 复选框---使用多层this// $("#checkAllOrNo").click(function(){// 	var parentFlag = this.checked;// 	$("input[name='items']").each(function(){// 		this.checked = parentFlag;// 	});// });//5.1.2 点击 全选/全不选 复选框----使用s(":checked")$("#checkAllOrNo").click(function(){$("input[name='items']").each(function(){// 选中状态与 全选/全不选 的复选框保持一致即可this.checked = $("#checkAllOrNo").is(":checked");});});//5.2 点击各项目复选框$("input[name='items']").each(function(){$(this).click(function(){// 点击任何一个复选框,全选/不全选 复选框都先设置为选中状态$("#checkAllOrNo").attr("checked",true);// 然后再循环所有的复选框,是否有未选中的$("input[name='items']").each(function(){if(!this.checked){$("#checkAllOrNo").attr("checked",false);return;}});});});//6.提交 获取选中的复选框// 6.1 拼接字符串写法$("#commit").click(function(){var commmitData = "";$("input[name='items']:checked").each(function(){commmitData += $(this).val() + ",";});var resultData = commmitData.substring(0,commmitData.length-1);alert(resultData);});// 6.2 数组写法$("#commit").click(function(){var commmitData = [];$("input[name='items']:checked").each(function(){commmitData.push($(this).val());});alert(commmitData);});</script></body>
    </html>
    

3. jQuery实现点击 行tr 实现checkBox选中 + 翻页勾选问题

3.1 jQuery实现点击 行tr 获取td中checkBox的值

3.1.1 方式1

  • 实现代码如下:
    // 1.1 点击tr获取tr中是checkbox的td的值----方式1
    $("#dogs_data tr").each(function(){var current = $(this);current.click(function(){var box = $(this).find(":checkbox");console.log(box);console.log(box.val());});
    });
    
  • 效果如下:
    在这里插入图片描述

3.1.2 方式2

  • 实现代码,如下:
    // 1.2 点击tr获取tr中是checkbox的td的值----方式2
    $("#dogs_data tr").each(function(){$(this).click(function(){var box = this.firstElementChild.firstElementChild;//获取checkbox元素标签console.log(box);console.log(box.value);//因为是标签,取值用.value});
    });
    
  • 实现效果,如下:
    在这里插入图片描述

3.2 jQuery实现点击 行tr 实现checkBox选中或取消

3.2.1 点击 tr 时,checkbox选中或取消

  • 实现代码,如下:
    $("#dogs_data tr").each(function(){$(this).click(function(){var box = this.firstElementChild.firstElementChild;//获取checkbox元素标签box.checked = !box.checked;// 直接取反});
    });
    
  • 实现效果,如下:
    在这里插入图片描述

3.2.2 点击 首行tr 时,实现全选或全不选

  • 实现代码如下:
    // 2.2 点击首行tr时(表头),实现全选或全不选
    $("#dogs_data tr:eq(0)").each(function(){$(this).click(function(){var box = this.firstElementChild.firstElementChild;//获取checkbox元素标签box.checked = !box.checked;// 直接取反$("input[name='dogIds']").each(function(){this.checked = box.checked;// 数据行的选中状态与首行的选中状态保持一致});});
    });
    
  • 实现效果如下:
    在这里插入图片描述

3.2.3 点击非首行tr时(数据列表行),全选或全不选自动切换

  • 实现代码如下:
    // 2.3 点击非首行tr时(数据列表行),全选或全不选自动切换
    $("#dogs_data tr:gt(0)").each(function(){$(this).click(function(){var box = this.firstElementChild.firstElementChild;//获取checkbox元素标签box.checked = !box.checked; // 数据行直接取反$("#checkAllOrNo").attr("checked",true);// 数行先设置选中// 然后循环数据行的checkbox,如果有未选中的,取消首行选中(为了少循环次数,直接从not(:checked)中循环)$("input[name='dogIds']:not(:checked)").each(function(){$("#checkAllOrNo").attr("checked",false);// 如果存在任意一个未选中,直接取消选中return;});});
    });
    
  • 效果如下(不是视频,不是很明显,需要的还需自己测试):
    在这里插入图片描述

3.3 翻页勾选问题

  • 如果想,支持翻页勾选,那就把每次勾选的缓存在页面中的一个输入框里,然后勾选一个追加一个,这个参考上面取值的方式直接拼接即可实现,此处就不再多说了。

3.4 附上述操作tr的全代码

  • 如下:
    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.3.2/jquery.min.js"></script><style>table {border-collapse: collapse;}table tr th,td{border: 1px solid;width: 60px;text-align: center;}thead tr:hover{background-color: rgb(255, 127, 127);}tbody tr:hover{background-color: aquamarine;}</style>
    </head>
    <body><table celllspacing="0" id="dogs_data"><thead><tr><th><input type="checkbox" id="checkAllOrNo" /></th><th>编号</th><th>姓名</th><th>年龄</th></tr></thead><tbody><tr><td><input type="checkbox" name="dogIds" value="A1001"/></td><td>A1001</td><td>麦兜</td><td>3</td></tr><tr><td><input type="checkbox" name="dogIds" value="A1002"/></td><td>A1002</td><td>贝塔</td><td>2</td></tr><tr><td><input type="checkbox" name="dogIds" value="A1003"/></td><td>A1003</td><td>泡泡</td><td>6</td></tr></tbody></table><script>// 1.1 点击tr获取tr中是checkbox的td的值----方式1// $("#dogs_data tr").each(function(){//     var current = $(this);//     current.click(function(){//         var box = $(this).find(":checkbox");//         console.log(box);//         console.log(box.val());//     });// });// 1.2 点击tr获取tr中是checkbox的td的值----方式2// $("#dogs_data tr").each(function(){//     $(this).click(function(){//         var box = this.firstElementChild.firstElementChild;//获取checkbox元素标签//         console.log(box);//         console.log(box.value);// 因为是标签,取值用.value//     });// });// 2.1 点击 行tr 实现checkBox选中或取消// $("#dogs_data tr").each(function(){//     $(this).click(function(){//         var box = this.firstElementChild.firstElementChild;//获取checkbox元素标签//         box.checked = !box.checked;// 直接取反//     });// });// 2.2 点击首行tr时(表头),实现全选或全不选$("#dogs_data tr:eq(0)").each(function(){$(this).click(function(){var box = this.firstElementChild.firstElementChild;//获取checkbox元素标签box.checked = !box.checked;// 直接取反$("input[name='dogIds']").each(function(){this.checked = box.checked;// 数据行的选中状态与首行的选中状态保持一致});});});// 2.3 点击非首行tr时(数据列表行),全选或全不选自动切换$("#dogs_data tr:gt(0)").each(function(){$(this).click(function(){var box = this.firstElementChild.firstElementChild;//获取checkbox元素标签box.checked = !box.checked; // 数据行直接取反$("#checkAllOrNo").attr("checked",true);// 数行先设置选中// 然后循环数据行的checkbox,如果有未选中的,取消首行选中(为了少循环次数,直接从not(:checked)中循环)$("input[name='dogIds']:not(:checked)").each(function(){$("#checkAllOrNo").attr("checked",false);// 如果存在任意一个未选中,直接取消选中return;});});});</script>
    </body>
    </html>
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/206093.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Java 基础】21 多线程同步与锁

文章目录 1.存在的问题2.使用同步解决问题1) synchronized2) volatile3) 锁 总结 用多线程过程中&#xff0c;有可能出现 多个线程同时处理&#xff08;获取或修改等&#xff09;同一个数据&#xff0c;这个时候就 会发生数据不同步的问题&#xff0c; 因此出现了同步和锁来…

APP备案(Android) - 获取签名证书公钥、MD5

因为近期刚针对各应用平台对APP备案时间节点要求进行了统一整理&#xff0c;然后隔天就被要求提供一下app相关的的公钥和MD5&#xff0c;虽然很快就解决了这个事情&#xff0c;但忍不住又稍微衍生了一下&#xff0c;但行小步&#xff0c;莫问远方吧 关联Blog APP备案(Android)…

java多线程(二)线程池

目录 java线程池 线程池应用场景&#xff1a; 如何创建线程池&#xff1a; 有什么区别&#xff1a; 不同线程池对应的应用场景 案例 输出结果 java线程池 Java线程池是一种预先创建一定数量的线程&#xff0c;并将任务提交给这些线程执行的机制。线程池可以避免频繁创建…

ExecutorService、Callable、Future实现有返回结果的多线程原理解析

原创/朱季谦 在并发多线程场景下&#xff0c;存在需要获取各线程的异步执行结果&#xff0c;这时&#xff0c;就可以通过ExecutorService线程池结合Callable、Future来实现。 我们先来写一个简单的例子—— public class ExecutorTest {public static void main(String[] ar…

Vulnhub项目:EMPIRE: BREAKOUT

一、靶机地址 靶机地址&#xff1a;Empire: Breakout ~ VulnHub 靶机介绍&#xff1a; 该靶机被定义为简单&#xff0c;但是如果没有找到&#xff0c;那就难度成中等了&#xff01; 二、渗透过程 老三样&#xff0c;发现目标&#xff0c;这里用 arp-scan 确定靶机 ip&#…

Java基础50题:14. 使用方法求最大值(2种方法)

概述 使用方法求最大值。 创建方法求两个数的最大值max2&#xff0c;随后再写一个求3个数的最大值函数max3。 要求&#xff1a; 在max3这个方法中&#xff0c;调用max2函数&#xff0c;来实现3个数的最大值计算。 方法一 【代码】 public class P14 {public static int max…

算法___

文章目录 算法两数之和 算法 两数之和 题目如下图&#xff1a; 我的答案如下图&#xff1a; 我采用的是最笨的思路&#xff0c;直接暴力的两次循环&#xff0c;第一次外循环是取数组的第一个元素&#xff0c;然后内循环会遍历数组后面除第一个的所有元素&#xff0c;然后和…

DDD架构思想专栏二《领域层的决策设计思想详解》

如果不了解DDD基本概念的读者可以去看这篇文章&#xff0c;传送门&#xff1a;DDD架构思想专栏一《初识领域驱动设计DDD落地》-CSDN博客 前言介绍 在上一章节介绍了领域驱动设计的基本概念以及按照领域驱动设计的思想进行代码分层&#xff0c;但是仅仅只是从一个简单的分层结…

【Flink系列三】数据流图和任务链计算方式

上文介绍了如何计算并行度和slot的数量&#xff0c;本文介绍Flink代码提交后&#xff0c;如何生成计算的DAG数据流图。 程序和数据流图 所有的Flink程序都是由三部分组成的&#xff1a;Source、Transformation和Sink。Source负责读取数据源&#xff0c;Transformation利用各种…

Remix IDE 快速开始Starknet

文章目录 一、Remix 项目二、基于Web的开发环境Remix 在线 IDE三、Starknet Remix 插件如何使用使用 Remix【重要】通过 Starknet by Example 学习一、Remix 项目 Remix 项目网站 在以太坊合约开发领域,Remix 项目享有很高的声誉,为各个级别的开发人员提供功能丰富的工具集…

JS中深拷贝与浅拷贝

定义 深拷贝&#xff08;Deep Copy&#xff09;和浅拷贝&#xff08;Shallow Copy&#xff09;是在编程中常用的两种对象复制方式。 浅拷贝&#xff08;Shallow Copy&#xff09;&#xff1a; 浅拷贝是创建一个新的对象&#xff0c;将原始对象的属性值复制到新对象中。如果属…

Smart Link和Monitor Link

Smart Link和Monitor Link简介 Smart Link&#xff0c;又叫做备份链路。一个Smart Link由两个接口组成&#xff0c;其中一个接口作为另一个的备份。Smart Link常用于双上行组网&#xff0c;提供可靠高效的备份和快速的切换机制。 Monitor Link是一种接口联动方案&#xff0c;它…

nodejs流

什么是流 stream 流是用于在 Node.js 中处理流数据的抽象接口。 node:stream 模块提供了用于实现流接口的 API。 什么是流数据 流数据是指一组顺序、大量、快速、连续到达的数据序列&#xff0c;一般情况下数据流可被视为一个随时间延续而无限增长的动态数据集合。流数据应用…

【keil备忘录】2. stm32 keil仿真时的时间测量功能

配置仿真器Trace内核时钟为单片机实际的内核时钟&#xff0c;需要勾选Enable设置&#xff0c;设置完成后Enable取消勾选也可以&#xff0c;经测试时钟频率配置仍然生效&#xff0c;此处设置为48MHZ: 时间测量时必须打开register窗口&#xff0c;否则可能不会计数 右下角有计…

第十四章 : Spring Boot 整合spring-session,使用redis共享

第十四章 &#xff1a; Spring Boot 整合spring-session,使用redis共享 前沿 本文重点讲述&#xff1a;spring boot工程中使用spring-session机制进行安全认证&#xff0c;并且通过redis存储session&#xff0c;满足集群部署、分布式系统的session共享。 基于SPringBoot 2.3.2…

[linux运维] 利用zabbix监控linux高危命令并发送告警(基于Zabbix 6)

之前写过一篇是基于zabbix 5.4的实现文章&#xff0c;但是不太详细&#xff0c;最近已经有两个小伙伴在zabbix 6上操作&#xff0c;发现触发器没有str函数&#xff0c;所以更新一下本文&#xff0c;基于zabbix 6 0x01 来看看效果 高危指令出发问题告警&#xff1a; 发出邮件告…

学好操作系统需要的前置知识

1. 态度&#xff1a;不要等一切都准备好了再前行 如果把一切你可能会说&#xff0c;没有这些基础知识&#xff0c;我每看一篇文章&#xff0c;知识就铺天盖地席卷过来&#xff0c;仿佛每一个知识点都准确地打在了自己的盲点上&#xff0c;这该怎么办呢&#xff1f; 我非常能理…

AI助力智慧农业,基于YOLOv8全系列模型【n/s/m/l/x】开发构建不同参数量级的识别系统

智慧农业随着数字化信息化浪潮的演变有了新的定义&#xff0c;在前面的系列博文中&#xff0c;我们从一些现实世界里面的所见所想所感进行了很多对应的实践&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 《自建数据集&#xff0c;基于YOLOv7开发构建农田场景下杂草…

05 JQuery基础入门

文章目录 一、jQuery介绍1. 简介2. 版本介绍3. 相关网站4. HTML引入方式 二、基础语法1. 顶级对象$2. 与DOM对象转化3. 选择器4. 事件5. 动画6. 修改样式7. 修改属性 一、jQuery介绍 1. 简介 jQuery是JavaScript编程语言底层库&#xff0c;它是一个快速&#xff0c;简洁的Jav…

ERPNext SQL 注入漏洞复现

0x01 产品简介 ERPNext 是一套开源的企业资源计划系统。 0x02 漏洞概述 ERPNext 系统frappe.model.db_query.get_list 文件 filters 参数存在 SQL 注入漏洞,攻击者除了可以利用 SQL 注入漏洞获取数据库中的信息(例如,管理员后台密码、站点的用户个人信息)之外,甚至在高权…