当前位置： 首页 > news >正文

实现复选框全选和全不选的切换

news 文章来源：https://blog.csdn.net/catascdd/article/details/128974028 2025/1/10 17:15:13

今天，复看了一下JS的菜鸟教程，发现评论里面都是精华呀！！

看到函数这一节，发现就复选框的全选和全不选功能展开了讨论。我感觉挺有意思的，尝试实现了一下。

1. 全选、全不选，两个按钮，两个方法

首先，按照自己的思路，笨方法实现了一下，一个按钮对应着一个方法。代码如下所示：

<!DOCTYPE html>
<head><title>全选、全不选实例</title>
</head>
<body>你喜欢什么水果？<br><input type="checkbox" name="fruit" value="苹果">苹果<input type="checkbox" name="fruit" value="香蕉">香蕉<input type="checkbox" name="fruit" value="橘子">橘子<input type="checkbox" name="fruit" value="葡萄">葡萄<input type="checkbox" name="fruit" value="芒果">芒果<input type="checkbox" name="fruit" value="榴莲">榴莲 <br><input type="button" value="全选" onclick="allSelect('fruit')"><input type="button" value="全不选" onclick="noneSelect('fruit')"><script>function allSelect(name){var checkboxs = document.getElementsByName(name);for(var i=0;i<checkboxs.length;i++){checkboxs[i].checked = true}}function noneSelect(name){var checkboxs = document.getElementsByName(name);for(var i=0;i<checkboxs.length;i++){checkboxs[i].checked = false}}</script>
</body>

很简单，代码也很容易理解，不多说。

2. 全选、全不选，同一个按钮，同一个方法（全选和全不选循环更替）

为了代码的简洁性，实现同一个按钮实现全选和全不选的两个功能。代码如下：

<!-- 利用一个按钮控制，意味着要将两个方法合二为一 -->
<input type="button" value="全选" onclick="handleSelect('fruit',this)"><script>var checkedValue = false;function handleSelect(name,controlInput){var checkboxs = document.getElementsByName(name);controlInput.value == "全选"? checkedValue=true:checkedValue=false;for(var i=0;i<checkboxs.length;i++){checkboxs[i].checked = checkedValue}checkedValue==true?controlInput.value = "全不选":controlInput.value = "全选";}
</script>

这里面用到了两次三元运算符，handleSelect(‘fruit’,this)”传了两个参数，一个是复选框的name属性值，一个是控制按钮本身。

算法思路：

  • 首先依据控制按钮的value值判断，是否全选，是的话循环将复选框checked设为true;
  • 然后，将按钮的value值设为全不选。
  • 起初，我传的值不是this，是value，我想着只要把value属性传过来就好啦，后续发现能传过来，但是后面想要修改的时候，就改不了。所以要传this，把指向对象的的传过来，就能修改属性了。

在评论中看到一个很强势的算法及另一个网友的改进算法，代码如下：

<!-- 强势 -->
<input type="button" value="全选" onclick="handlecheck()">
<!-- 上面的改进 -->
<input type="button" value="全选" onclick="allcheck(this)"><script>// 无法判断当前的value-----很强势，点一下全选、全不选var checkAll = false;function handlecheck(){checkAll = !checkAll;let inputs = document.getElementsByName('fruit')for(var i =0;i<inputs.length;i++){inputs[i].checked = checkAll}}// 改进var checkAll = false;function allcheck(element){checkAll = !checkAll;element.value=checkAll?"全不选":"全选";let inputs = document.getElementsByName('fruit') for( var index in inputs){inputs[index].checked = checkAll;}}
</script>

第一种算法有缺陷，没有判断，点一下全选，再点一下全不选，用户体验不好，不可取。

第二种算法，和我的实现效果是一样的，但算法思路不一样，是默认全不选，然后点击一下修改为全选，同时文字信息修改。

上面这三种算法，本质上其实有些像，基本就是全选和全不选循环，第一种和第三种的按钮value值会跟着修改，用户体验会好一点。

3. 全选、全不选，在表格中（更符合用户需求）

依据自己的项目经验，我感觉下面这种情况用的是最多的。

 

<!DOCTYPE html>
<html><head><title>全选全不选结合用户需求</title><style>table{border-collapse:collapse;}table, td, th{border:1px solid black;}</style></head><body><table><tr><th><input type="checkbox" id="fruitControl" onclick="allSelect(this, 'fruit')"></th><th>你喜欢什么水果</th></tr><tr><td><input type="checkbox" name="fruit" value="苹果" onclick="handleSelect(this, 'fruitControl')"></td><td>苹果</td></tr><tr><td><input type="checkbox" name="fruit" value="香蕉" onclick="handleSelect(this, 'fruitControl')"></td><td>香蕉</td></tr><tr><td><input type="checkbox" name="fruit" value="橘子" onclick="handleSelect(this, 'fruitControl')"></td><td>橘子</td></tr><tr><td><input type="checkbox" name="fruit" value="葡萄" onclick="handleSelect(this, 'fruitControl')"></td><td>葡萄</td></tr></table><script>function allSelect(ele, name){// 全选框是什么状态（选中or没选中），底下的checkbox框就是什么状态var checkboxs = document.getElementsByName(name);for(var i=0;i<checkboxs.length;i++){checkboxs[i].checked = ele.checked}}function handleSelect(ele, controlId){var allSelectControl = document.getElementById(controlId);// 当前框没有选中，全选框肯定没选中if(ele.checked == false){allSelectControl.checked = false;} else {// 当前框选中了，去看其它其它框，只要有一个没选中，全选框就不会选中var checkboxs = document.getElementsByName(ele.name);var allChecked = true;for(var i=0;i<checkboxs.length;i++){if( checkboxs[i].checked == false ){allChecked = false;break;             }   }allSelectControl.checked = allChecked; }}</script></body>
</html>

相关文章：

实现复选框全选和全不选的切换

今天&#xff0c;复看了一下JS的菜鸟教程&#xff0c;发现评论里面都是精华呀&#xff01;&#xff01; 看到函数这一节&#xff0c;发现就复选框的全选和全不选功能展开了讨论。我感觉挺有意思的&#xff0c;尝试实现了一下。 1. 全选、全不选&#xff0c;两个按钮&#xff…...

编程日记 2023/2/11 11:49:30

React hooks之useState用法（一）

系列文章目录 学习React已经有很长的一段时间了&#xff0c;今天决定重新回顾一下跟React相关的一些知识点 文章目录系列文章目录结构如下一、hooks是什么&#xff1f;useState可以能做什么二、如何使用useState&#xff08;&#xff09;第一步&#xff1a;创建【函数组件&…...

编程日记 2023/2/11 11:48:22

spring的简单理解

目录 1 .ioc容器&#xff08;控制反转&#xff09; 2. Aop面向切面编程 3. 事务申明 4. 注解的方式启动 5. spring是什么与他的优势 6. 代理设计模式&#xff08;比如aop&#xff09; 7. springmvc中相应json数据 8. 使用lombok来进行对代码的简化 9. 使用logback记录…...

编程日记 2023/2/11 11:46:07

Docker调用Intel集显实现FFmpeg硬解码

文章目录Docker调用Intel集显实现FFmpeg硬解码参考FFmpeg 集成qsv方式一 容器完成所有步骤方式二 容器完成部分步骤方式三 dockerfile部署Docker调用Intel集显实现FFmpeg硬解码 参考 ffmpeg_qsv_docker拉取该镜像可以实现FFmpeg集成vaapi的硬加速&#xff0c;通过dockerfile文…...

编程日记 2023/2/11 11:45:01

端到端模型（end-to-end）与非端到端模型

一、端到端&#xff08;end to end&#xff09; 从输入端到输出端会得到一个预测结果&#xff0c;将预测结果和真实结果进行比较得到误差&#xff0c;将误差反向传播到网络的各个层之中&#xff0c;调整网络的权重和参数直到模型收敛或者达到预期的效果为止&#xff0c;中间所…...

编程日记 2023/2/11 11:43:52

uniApp封装一个滑块组件

最近 项目中有一个需求 PC端动态设计的表单 移动端要能渲染出来 那么 就要去找到对应的组件 而其中 没有的 就包括滑块 没有又能怎么办 只能自己封装一个 我们直接上代码 <template><view class"u-slider" tap"onClick" :class"[disabled…...

编程日记 2023/2/11 11:42:43

运动基元（二）：贝塞尔曲线

贝塞尔曲线是我第一个深入接触并使用于路径规划的运动基元。N阶贝塞尔曲线具有很多优良的特性，例如端点性、N阶可导性、对称性、曲率连续性、凸包性、几何不变性、仿射不变性以及变差缩减性。本章主要介绍贝塞尔曲线用于运动基元时几个特别有用的特性。 一、贝塞尔曲线的定义 …...

编程日记 2023/2/11 11:41:36

Android 11.0 关于Launcher3中调用截图功能总是返回null的解决方案

1.1概述 在11.0的系统产品开发中,在某些时候需要调用截图接口来进行截屏功能实现，而在Launcher3中发现调用系统截屏接口SurfaceControl.screenshot进行截图的时候始终为null, 获取不到系统当前页面的截屏功能，所以需要找到当前截屏失败的原因然后来实现截屏功能的实现，下面来…...

编程日记 2023/2/11 11:40:29

random随机数

random随机数 1.概述 random用来生成一些随机数&#xff0c;下面介绍random模块提供的方法根据需求生成不同的随机数。 2.random常用操作 2.1.random默认随机数 random()函数返回一个随机的浮点值&#xff0c;默认返回值范围在0 < n < 1.0区间 import randomfor i …...

编程日记 2023/2/11 11:39:20

【金三银四系列】Spring面试题-上（2023版）

Spring面试专题 1.Spring应该很熟悉吧&#xff1f;来介绍下你的Spring的理解 有些同学可能会抢答&#xff0c;不熟悉!!! 好了&#xff0c;不开玩笑&#xff0c;面对这个问题我们应该怎么来回答呢&#xff1f;我们给大家梳理这个几个维度来回答 1.1 Spring的发展历程 先介绍…...

编程日记 2023/2/11 11:38:10

linux基本功系列之tar命令实战

文章目录前言一. tar命令介绍二. 语法格式及常用选项三. 参考案例3.1 仅打包不压缩3.2 打包后使用调用压缩命令进行压缩3.3 列出文件的内容3.4 追加文件到tar命令中3.5 释放文件到指定的目录四 . 各种压缩方式的比较总结前言 大家好&#xff0c;又见面了&#xff0c;我是沐风晓…...

编程日记 2023/2/11 11:36:59

Prometheus服务发现

Prometheus服务发现介绍 Prometheus默认是采用pull的方式拉取监控数据的&#xff0c;每一个被抓取的目标都要暴露一个HTTP接口&#xff0c;prometheus通过这个接口来获取相应的指标数据&#xff0c;这种方式需要由prometheus-server决定采集的目标服务器有哪些&#xff0c;通过…...

编程日记 2023/2/11 11:35:48

【Spring6源码・MVC】请求处理流程源码解析

上一篇《【Spring6源码・MVC】初始化registry&#xff0c;完成url和controller的映射关系》我们知道&#xff0c;在IOC容器加载的同时&#xff0c;初始化了registry这个HashMap&#xff0c;这个HashMap中存放了请求路径和对应的方法。当我们请求进来&#xff0c;会通过这个regi…...

编程日记 2023/2/11 11:34:36

elasticsearch term match 查询

1. 准备数据 PUT h1/doc/1 {"name": "rose","gender": "female","age": 18,"tags": ["白", "漂亮", "高"] }PUT h1/doc/2 {"name": "lila","gender&quo…...

编程日记 2023/2/11 11:33:27

canal使用说明：MySQL、Redis实时数据同步

1. canal简介 canal是阿里开源的数据同步工具&#xff0c;基于bin log可以将数据库同步到其他各类数据库中&#xff0c;目标数据库支持mysql,postgresql,oracle,redis,MQ,ES等 canal分成服务端deployer和客户端adapter&#xff0c;我们可以部署多个&#xff0c;同时为了方便管…...

编程日记 2023/2/11 11:32:17

计算机视觉框架OpenMMLab开源学习（三）：图像分类实战

前言&#xff1a;本篇主要偏向图像分类实战部分&#xff0c;使用MMclassification工具进行代码应用&#xff0c;最后对水果分类进行实战演示&#xff0c;本次环境和代码配置部分省略&#xff0c;具体内容建议参考前一篇文章&#xff1a;计算机视觉框架OpenMMLab开源学习&#x…...

编程日记 2023/2/11 11:31:10

awk命令

一.介绍 awk是专门为文本处理设计的编程语言&#xff0c;是一门数据驱动的编程语言。与sed类似&#xff0c;都是以数据驱动的行处理软件&#xff0c;主要用于数据扫描&#xff0c;过滤和汇总。数据可以来自于标准输入&#xff0c;管道或者文件。 二.语法 awk是一种处理文本文件…...

编程日记 2023/2/11 11:30:04

LocalDateTime获取时间的年、月、日、时、分、秒、纳秒

如何把String/Date转成LocalDateTime参考String、Date与LocalDate、LocalTime、LocalDateTime之间互转 String、Date、LocalDateTime、Calendar与时间戳之间互相转化参考String、Date、LocalDateTime、Calendar与时间戳之间互相转化 方法介绍 getYear() 获取日期的年 getMon…...

编程日记 2023/2/11 11:28:55

MoveIT Rviz和Gazebo联合仿真

文章目录环境安装概述ros_control框架ros_control数据流文件配置附加工具故障问题解决参考接前两篇&#xff1a;ROS MoveIT1&#xff08;Noetic&#xff09;安装总结 Solidworks导出为URDF用于MoveIT总结&#xff08;带prismatic&#xff09; MoveIT1 Assistant 总结 环境 Ubu…...

编程日记 2023/2/11 11:27:46

ESP32S2(12K)-DS18B20数码管显示温度

一、物料清单： NODEMCU-32-S2 (ESP32-12K)四段数码管（共阴）DS18B20（VCC/DQ/GND）Arduino-IDE 2.0.3二、实现方法及效果图： 2.1 引用库 // #include <OneWire.h> //可以不引入，因为DallasTemperature.h中已经引入了OneWire.h #include <DallasTemperature.h>#…...

编程日记 2023/2/11 11:26:38

linux栈溢出定位

一、编译选项定位堆栈溢出 来源&#xff1a;堆栈溢出检测机制 - SkrSky - 博客园 1、栈溢出可能打印 unhandled level 1 translation fault (11) at 0x7f8d0347, esr 0x92000005 2、栈溢出保护机制 gcc提供了栈保护机制stack-protector&#xff08;编译选项-fstack-protec…...

编程日记 2023/2/11 11:25:29

CSS基础：选择器和声明样式

CSS概念 CSS&#xff08;Cascading Style Sheets&#xff09;层叠样式表&#xff0c;又叫级联样式表&#xff0c;简称样式表 CSS用于HTML文档中元素样式的定义 使用css让网页具有美观一致的页面 语法 CSS 规则由两个主要的部分构成&#xff1a;选择器和声明样式 选择器通常…...

编程日记 2023/2/11 11:24:20

VS中安装gismo库

文章目录前言一、下载安装paraview直接下载压缩包安装就可以了解压后按步骤安装即可二、gismo库的安装gismo库网址第一种方法&#xff1a;第二种方法第三种方法&#xff1a;用Cmake软件直接安装首先下载cmake软件[网址](https://cmake.org/download/)安装gismo库三、gismo库的使…...

编程日记 2023/2/11 11:23:09

元学习方法解决CDFSL以及两篇SOTA论文讲解

来源&#xff1a;投稿 作者&#xff1a;橡皮 编辑&#xff1a;学姐 带你学习跨域小样本系列1-简介篇 跨域小样本系列2-常用数据集与任务设定详解 跨域小样本系列3&#xff1a;元学习方法解决CDFSL以及两篇SOTA论文讲解&#xff08;本篇&#xff09; 跨域小样本系列4&#xf…...

编程日记 2023/2/11 11:21:57

大数据之------------数据中台

一、什么是数据中台 **数据中台是指通过数据技术&#xff0c;对海量数据进行采集、计算、存储、加工&#xff0c;同时统一标准和口径。**数据中台的目标是让数据持续用起来&#xff0c;通过数据中台提供的工具、方法和运行机制&#xff0c;把数据变为一种服务能力&#xff0c;…...

编程日记 2023/2/11 11:20:45

Python 中 字符串是什么？

字符串是 Python 中最常用的数据类型。我们可以使用引号 ( ’ 或 " ) 来创建字符串。 创建字符串很简单&#xff0c;只要为变量分配一个值即可。例如&#xff1a; var1 ‘Hello World!’ var2 “Python Runoob” Python 访问字符串中的值 Python 不支持单字符类型&…...

编程日记 2023/2/11 11:19:34

OJ刷题Day1 · 一维数组的动态和 · 将数字变成 0 的操作次数 · 最富有的客户资产总量 · Fizz Buzz · 链表的中间结点 · 赎金信

一、一维数组的动态和二、将数字变成 0 的操作次数三、最富有的客户资产总量四、Fizz Buzz五、链表的中间结点六、赎金信一、一维数组的动态和 给你一个数组 nums 。数组「动态和」的计算公式为&#xff1a;runningSum[i] sum(nums[0]…nums[i]) 。 请返回 nums 的动态和。 示…...

编程日记 2023/2/11 11:18:21

【数据结构】栈——必做题

逆波兰表达式后缀表达式的出现是为了方便计算机处理&#xff0c;它的运算符是按照一定的顺序出现&#xff0c;所以求值过程中并不需要使用括号来指定运算顺序&#xff0c;也不需要考虑运算符号&#xff08;比如加减乘除&#xff09;的优先级。先介绍中简单的人工转化方法&#…...

编程日记 2023/2/11 11:17:12

LearnOpenGL 笔记 - 入门 04 你好，三角形

系列文章目录 LearnOpenGL 笔记 - 入门 01 OpenGLLearnOpenGL 笔记 - 入门 02 创建窗口LearnOpenGL 笔记 - 入门 03 你好&#xff0c;窗口 文章目录系列文章目录前言你好&#xff0c;三角形顶点输入顶点着色器&#xff08;Vertex Shader&#xff09;编译着色器片段着色器&…...

编程日记 2023/2/11 11:16:03

keepalived+mysql高可用

一.设置mysql同步信息两节点安装msyql略#配置节点11.配置权限允许远程访问mysql -u root -p grant all on *.* to root% identified by Root1212# with grant option; flush privileges;2.修改my.cnf#作为主节点配置(节点1)#作为主节点配置 server-id 1 …...

编程日记 2023/2/11 11:14:52

网站 设计 方案/营销渠道模式有哪些

前言本章主要介绍数据库中 groupby的用法&#xff0c;也是我们在使用数据库时非常基础的一个知识点。并且也会涉及Join的使用&#xff0c;关于Join的用法&#xff0c;可以看我写的上一篇文章&#xff1a;带你了解数据库中JOIN的用法 如有错误还请大家及时指出~以下都是采用mysq…...

编程日记 2025/1/10 13:28:29

兰州 网站/小网站搜什么关键词好

创建与合并分支 在版本回退里&#xff0c;每次提交&#xff0c;Git都把它们串成一条时间线&#xff0c;这条时间线就是一个分支。Git里&#xff0c;这个分支叫主分支&#xff0c;即master分支。HEAD严格来说不是指向提交&#xff0c;而是指向master&#xff0c;master才是指向…...

编程日记 2025/1/10 12:44:09

建设020网站需要多少钱/无锡seo关键词排名

转&#xff1a;http://windshg.iteye.com/blog/1606981...

编程日记 2025/1/10 11:21:50

简易网站建设/微信附近人推广引流

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2020年A特种设备相关管理&#xff08;电梯&#xff09;考试题及A特种设备相关管理&#xff08;电梯&#xff09;找答案&#xff0c;包含A特种设备相关管理&#xff08;电梯&#xff09;考试题答案和解析及A特种设备相…...

编程日记 2025/1/10 10:42:11

docker 部署wordpress/男生技能培训班有哪些

之前已经说了前面八个问题&#xff0c;现在接着往下分享&#xff0c;没有看到之前的文章的可以点击这里哦~ 九、Swoole如何正确的重启服务 在我们修改了 PHP 代码后经常需要重启服务让代码生效&#xff0c;一台繁忙的后端服务器随时都在处理请求&#xff0c;如果管理员通过 k…...

编程日记 2025/1/10 10:22:58

公司网站域名申请/内江seo

直接在centos操作系统安装 一、安装 pip install virtualenv二、创建环境 cd /opt/metersphere/datamkdir pythoncd python/# 当前文件夹下创建虚拟环境 virtualenv --copies .# 激活虚拟环境 下次进去就是在data目录下 source python/bin/activate source /bin/activate# 安…...

编程日记 2025/1/10 6:47:34