js实现全选/反选和单选

浅浅的花香味﹌ 2022-06-08 09:48 335阅读 0赞

### 描述 ###

#### 一般用在后台管理数据，以及购物车批量操作 等多种情况 ####

![这里写图片描述][SouthEast]

### JS代码： ###

<script type="text/javascript"> function checkAll(){ //全选 和反选 以及 单选 //1.获取全选/反选元素 var all = document.getElementById("all"); //2.查找列表中每一项的元素 var ckOnes = document.getElementsByName("ckOne"); for (var i = 0; i < ckOnes.length; i++) { ckOnes[i].checked= all.checked;//把全选框的状态循环赋给所有的单选框！！！！！！ } } function checkOne(){ //单选 //1.获取全选/反选元素 var all = document.getElementById("all"); //2.查找列表中每一项的元素 var ckOnes = document.getElementsByName("ckOne"); //定义一个变量，统计状态为选中的单选框的个数 var count=0; for (var i = 0; i < ckOnes.length; i++) { //循环各个单选 var ckOne= ckOnes[i]; //判断选中的 if(ckOne.checked==true){ //循环得到单选的状态，如果单选状态为true的话，就让count++ count++;//这里得到了到底有几个单选框被选中 } } if(count==ckOnes.length){ //判断count 如果count的数量等于单选框的数量的话，也就是说每一个都选中了的话，就让全选框状态为true all.checked=true; }else{ all.checked=false;//否则的话 全选框状态为 不选 } } </script>

### html/jsp页面部分 ###

#### 全选/反选框部分 ####

<td align="center" width="9%"><input type="checkbox" name="ckAll" value="全选/反选" onclick="checkAll()" id="all"/>全选/反选</td>

#### 单选框部分 ####

<td align="center" width="9%"><input type="checkbox" name="ckOne" onclick="checkOne()" id="one"/></td>

美滋滋！！！

[SouthEast]: /images/20220608/000e914d28dd427381017faae3da0dca.png

发表评论取消回复

表情：

评论列表（有 0 条评论，335人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）

首先为复选框添加了一个事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与复选框相同的状态。

缺乏、安全感/ 2024年04月22日 22:30/ 0 赞/ 115 阅读

相关用 JS（JavaScript ）实现多选、全选、反选

JS小例题学习内容：需求总结：学习内容：需求用 JavaScript 实现全选、反选、多选实现代码 <!D

╰+哭是因爲堅強的太久メ/ 2023年01月16日 03:29/ 0 赞/ 247 阅读

相关 js实现全选、多选、反选（JQuery 实现）

jQuery 实现全选、多选、反选学习内容：需求总结：学习内容：需求 jQuery 实现全选、多选、反选实现代码

绝地灬酷狼/ 2022年10月16日 11:23/ 0 赞/ 243 阅读

相关 ElementUI el-checkbox实现全选反选单选

一、概述先来看一下效果图 ![8dbcd72c55ff052910facb707005eab9.png][] 需求： 1. 每一种类型，可以全选，反选(一个都不选

痛定思痛。/ 2022年10月09日 02:35/ 0 赞/ 306 阅读

相关 js 实现复选框全选和反选

//全选 function chooseAll() \{ var selects = document.getElementsByName('id

深碍√TFBOYSˉ_/ 2022年08月26日 11:24/ 0 赞/ 286 阅读

相关使用js实现全选单选全部选

/ 思路：1、获取元素。2、用for循环历遍数组，把checkbox的checked设置为true即实现全选， // 把checkbox的checked设置为false即实

秒速五厘米/ 2022年08月20日 02:17/ 0 赞/ 236 阅读

相关 js实现全选/反选和单选

描述一般用在后台管理数据，以及购物车批量操作等多种情况 ![这里写图片描述][SouthEast] JS代码： <script type="te

浅浅的花香味﹌/ 2022年06月08日 09:48/ 0 赞/ 336 阅读

相关 js实现复选框的全选、取消全选、反选

思路很简单：全选：将所有复选框的checked设置为true 取消全选：将所有复选框的checked设置为false 反选：将所有选中的复选框设置为false，未选中的

朱雀/ 2022年05月18日 05:47/ 0 赞/ 446 阅读

相关 js全选/全不选/反选

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

迷南。/ 2022年05月13日 10:08/ 0 赞/ 306 阅读

相关 js 实现复选框全选和反选

//全选 function chooseAll() \{ var selects = document.getElementsByName('id

蔚落/ 2022年05月11日 13:42/ 0 赞/ 308 阅读