实现复选框全选和全不选的切换
今天，复看了一下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>相关文章：
实现复选框全选和全不选的切换
今天，复看了一下JS的菜鸟教程，发现评论里面都是精华呀！！ 看到函数这一节，发现就复选框的全选和全不选功能展开了讨论。我感觉挺有意思的，尝试实现了一下。 1. 全选、全不选，两个按钮ÿ…...
React hooks之useState用法（一）
系列文章目录 学习React已经有很长的一段时间了，今天决定重新回顾一下跟React相关的一些知识点 文章目录系列文章目录结构如下一、hooks是什么？useState可以能做什么二、如何使用useState（）第一步：创建【函数组件&…...
spring的简单理解
目录 1 .ioc容器（控制反转） 2. Aop面向切面编程 3. 事务申明 4. 注解的方式启动 5. spring是什么与他的优势 6. 代理设计模式（比如aop） 7. springmvc中相应json数据 8. 使用lombok来进行对代码的简化 9. 使用logback记录…...
Docker调用Intel集显实现FFmpeg硬解码
文章目录Docker调用Intel集显实现FFmpeg硬解码参考FFmpeg 集成qsv方式一 容器完成所有步骤方式二 容器完成部分步骤方式三 dockerfile部署Docker调用Intel集显实现FFmpeg硬解码 参考 ffmpeg_qsv_docker拉取该镜像可以实现FFmpeg集成vaapi的硬加速，通过dockerfile文…...
端到端模型（end-to-end）与非端到端模型
一、端到端（end to end） 从输入端到输出端会得到一个预测结果，将预测结果和真实结果进行比较得到误差，将误差反向传播到网络的各个层之中，调整网络的权重和参数直到模型收敛或者达到预期的效果为止，中间所…...
uniApp封装一个滑块组件
最近 项目中有一个需求 PC端动态设计的表单 移动端要能渲染出来 那么 就要去找到对应的组件 而其中 没有的 就包括滑块 没有又能怎么办 只能自己封装一个 我们直接上代码 <template><view class"u-slider" tap"onClick" :class"[disabled…...
运动基元（二）：贝塞尔曲线
贝塞尔曲线是我第一个深入接触并使用于路径规划的运动基元。N阶贝塞尔曲线具有很多优良的特性，例如端点性、N阶可导性、对称性、曲率连续性、凸包性、几何不变性、仿射不变性以及变差缩减性。本章主要介绍贝塞尔曲线用于运动基元时几个特别有用的特性。 一、贝塞尔曲线的定义 …...
Android 11.0 关于Launcher3中调用截图功能总是返回null的解决方案
1.1概述 在11.0的系统产品开发中,在某些时候需要调用截图接口来进行截屏功能实现，而在Launcher3中发现调用系统截屏接口SurfaceControl.screenshot进行截图的时候始终为null, 获取不到系统当前页面的截屏功能，所以需要找到当前截屏失败的原因然后来实现截屏功能的实现，下面来…...
random随机数
random随机数 1.概述 random用来生成一些随机数，下面介绍random模块提供的方法根据需求生成不同的随机数。 2.random常用操作 2.1.random默认随机数 random()函数返回一个随机的浮点值，默认返回值范围在0 < n < 1.0区间 import randomfor i …...
【金三银四系列】Spring面试题-上（2023版）
Spring面试专题 1.Spring应该很熟悉吧？来介绍下你的Spring的理解 有些同学可能会抢答，不熟悉!!! 好了，不开玩笑，面对这个问题我们应该怎么来回答呢？我们给大家梳理这个几个维度来回答 1.1 Spring的发展历程 先介绍…...
linux基本功系列之tar命令实战
文章目录前言一. tar命令介绍二. 语法格式及常用选项三. 参考案例3.1 仅打包不压缩3.2 打包后使用调用压缩命令进行压缩3.3 列出文件的内容3.4 追加文件到tar命令中3.5 释放文件到指定的目录四 . 各种压缩方式的比较总结前言 大家好，又见面了，我是沐风晓…...
Prometheus服务发现
Prometheus服务发现介绍 Prometheus默认是采用pull的方式拉取监控数据的，每一个被抓取的目标都要暴露一个HTTP接口，prometheus通过这个接口来获取相应的指标数据，这种方式需要由prometheus-server决定采集的目标服务器有哪些，通过…...
【Spring6源码・MVC】请求处理流程源码解析
上一篇《【Spring6源码・MVC】初始化registry，完成url和controller的映射关系》我们知道，在IOC容器加载的同时，初始化了registry这个HashMap，这个HashMap中存放了请求路径和对应的方法。当我们请求进来，会通过这个regi…...
elasticsearch term match 查询
1. 准备数据 PUT h1/doc/1 {"name": "rose","gender": "female","age": 18,"tags": ["白", "漂亮", "高"] }PUT h1/doc/2 {"name": "lila","gender&quo…...
canal使用说明：MySQL、Redis实时数据同步
1. canal简介 canal是阿里开源的数据同步工具，基于bin log可以将数据库同步到其他各类数据库中，目标数据库支持mysql,postgresql,oracle,redis,MQ,ES等 canal分成服务端deployer和客户端adapter，我们可以部署多个，同时为了方便管…...
计算机视觉框架OpenMMLab开源学习（三）：图像分类实战
前言：本篇主要偏向图像分类实战部分，使用MMclassification工具进行代码应用，最后对水果分类进行实战演示，本次环境和代码配置部分省略，具体内容建议参考前一篇文章：计算机视觉框架OpenMMLab开源学习&#x…...
awk命令
一.介绍 awk是专门为文本处理设计的编程语言，是一门数据驱动的编程语言。与sed类似，都是以数据驱动的行处理软件，主要用于数据扫描，过滤和汇总。数据可以来自于标准输入，管道或者文件。 二.语法 awk是一种处理文本文件…...
LocalDateTime获取时间的年、月、日、时、分、秒、纳秒
如何把String/Date转成LocalDateTime参考String、Date与LocalDate、LocalTime、LocalDateTime之间互转 String、Date、LocalDateTime、Calendar与时间戳之间互相转化参考String、Date、LocalDateTime、Calendar与时间戳之间互相转化 方法介绍 getYear() 获取日期的年 getMon…...
MoveIT Rviz和Gazebo联合仿真
文章目录环境安装概述ros_control框架ros_control数据流文件配置附加工具故障问题解决参考接前两篇：ROS MoveIT1（Noetic）安装总结 Solidworks导出为URDF用于MoveIT总结（带prismatic） MoveIT1 Assistant 总结 环境 Ubu…...
-DS18B20数码管显示温度)
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>#…...
Rasa Pro企业级对话AI实战：从安全扫描到密钥管理的完整配置指南
Rasa Pro企业级对话AI实战：从安全扫描到密钥管理的完整配置指南 在金融行业数字化转型浪潮中，智能对话系统已成为客户服务的核心组件。作为Rasa的商业化企业版本，Rasa Pro凭借其专业级的安全防护和可观测性功能，正在成为银行、保险…...
利用快马平台快速构建openclawskills技能分享网站原型
最近在构思一个技能分享平台openclawskills，想快速验证这个创意是否可行。传统开发流程需要搭建前后端环境、设计数据库、编写大量基础代码，耗时耗力。后来尝试用InsCode(快马)平台，发现它能大幅缩短原型开发周期，特别适合快速验证…...
ChatTTS角色系统：从技术原理到生产环境部署指南
在语音合成技术日益成熟的今天，多角色、高表现力的TTS系统已成为互动应用的关键组件。ChatTTS的角色系统允许在同一对话流中动态切换不同音色的语音输出，极大地提升了交互的自然度和沉浸感。然而，在实际生产部署中，开发者常面临一…...
新能源运维数字化方案：帮我吧助力企业实现全流程智能管控
在“双碳”目标的深入推进下，新能源产业迎来高速发展期，光伏、风电、储能、新能源汽车等领域的市场规模持续扩大，行业发展重心从“投建”转向“运营与服务”。对于新能源企业而言，设备分布广、终端用户分散、设备智能化程度高&…...
2026最新Java面试,必问的十个AI面试题!标准答案+实战避坑,先码住!
2026年Java面试必问的十大AI相关面试题：标准答案与实战避坑指南 随着AI技术的快速发展，Java开发者在面试中越来越多地遇到与AI结合的考题。以下是2026年Java面试中可能涉及的十大AI相关问题，涵盖标准答案、代码示例及实战避坑技巧。 1. 如何在Java中集成机器学习模型？ …...
专业硬件监控解决方案：LibreHardwareMonitor完全指南
专业硬件监控解决方案：LibreHardwareMonitor完全指南 【免费下载链接】LibreHardwareMonitor Libre Hardware Monitor, home of the fork of Open Hardware Monitor 项目地址: https://gitcode.com/GitHub_Trending/li/LibreHardwareMonitor 在当今数字化时代…...
Java OOM 异常：从原理、场景、排查到解决方案全攻略
原理 → 场景 → 排查 → 解决方案（面试 线上实战必备）这是后端开发、测试、运维必须烂熟于心的终极 OOM 指南，结构清晰、可直接用于复习、面试、故障处理。一、OOM 基础：到底什么是 OOM？1. 定义OOM OutOfMemoryErro…...
探索跨平台动态壁纸的技术突破：Lively Wallpaper的多系统适配之路
探索跨平台动态壁纸的技术突破：Lively Wallpaper的多系统适配之路 【免费下载链接】lively Free and open-source software that allows users to set animated desktop wallpapers and screensavers powered by WinUI 3. 项目地址: https://gitcode.com/gh_mirro…...
计算机毕业设计实战：基于时序模型的农产品销量预测系统构建与避坑指南
最近在指导学弟学妹做毕业设计，发现“农产品销量预测”这个选题特别火，但大家普遍在数据处理和模型选择上栽跟头。今天我就结合自己之前做的一个小项目，聊聊怎么从零搭建一个靠谱的农产品销量预测系统，重点分享一些实战中容易踩的…...
嵌入式软件开发相关的硬件知识及技能
对于嵌入式软件开发工程师来说，硬件知识并非要求达到硬件工程师那样的设计深度，而是更侧重于理解、交互与协同。掌握必要的硬件知识，能让你写出更稳定、更高效的代码，并在软硬件联调时快速定位问题。以下从几个核心层面详述所需掌…...