HTML+CSS+JavaScript：全选与反选案例
一、需求
1、单击全选按钮，下面三个复选框自动选中，再次单击全选按钮，下面三个复选框自动取消选中
2、当下面三个复选框全都选中时，全选按钮自动选中，下面三个复选框至少有一个未选中，全选按钮自动取消选中
二、代码素材
以下是缺失JS部分的代码，感兴趣的小伙伴可以先自己试着写一写
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 500px;margin: 100px auto;text-align: center;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;height: 24px;}td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}.allCheck {width: 80px;}</style>
</head><body><table><tr><th class="allCheck"><input type="checkbox" name="" id="checkAll"> <span class="all">全选</span></th><th>商品</th><th>商家</th><th>价格</th></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米手机</td><td>小米</td><td>￥1999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米净水器</td><td>小米</td><td>￥4999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米电视</td><td>小米</td><td>￥5999</td></tr></table><script></script>
</body></html>三、算法思路
1、获取相关元素
2、为全选框绑定鼠标点击事件，当点击事件触发时，将下面三个复选框的状态设置为与全选框一致
3、利用事件委托为下面三个复选框绑定鼠标点击事件，当任意一个复选框触发点击事件时，判断下面三个复选框是否全为选中状态，若全选中，则将全选框设置为全选，否则不设置。
四、完整代码
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 500px;margin: 100px auto;text-align: center;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;height: 24px;}td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}.allCheck {width: 80px;}</style>
</head><body><table><tr><th class="allCheck"><input type="checkbox" name="" id="checkAll"> <span class="all">全选</span></th><th>商品</th><th>商家</th><th>价格</th></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米手机</td><td>小米</td><td>￥1999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米净水器</td><td>小米</td><td>￥4999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米电视</td><td>小米</td><td>￥5999</td></tr></table><script>//获取元素const checkAll = document.querySelector('#checkAll')const cks = document.querySelectorAll('.ck')//业务模块一：单击全选按钮，下面三个复选框自动选中，再次单击全选按钮，下面三个复选框自动取消选中checkAll.addEventListener('click', function () {for (let i = 0; i < cks.length; i++)cks[i].checked = this.checked})//业务模块二：当下面三个复选框全都选中时，全选按钮自动选中，下面三个复选框至少有一个未选中，全选按钮自动取消选中//利用事件委托绑定事件const table=document.querySelector('table')table.addEventListener('click',e=>{if(e.target.tagName==='INPUT'){checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length//.ck:checked是CSS伪类选择器，可以获取复选框中checked为true的选择器}})</script>
</body></html>相关文章：
HTML+CSS+JavaScript：全选与反选案例
一、需求 1、单击全选按钮，下面三个复选框自动选中，再次单击全选按钮，下面三个复选框自动取消选中 2、当下面三个复选框全都选中时，全选按钮自动选中，下面三个复选框至少有一个未选中，全选按钮自动取消选…...
Python 程序设计入门（001）—— 安装 Python（Windows 操作系统）
Python 程序设计入门（001）—— 安装 Python（Windows 操作系统） 目录 Python 程序设计入门（001）—— 安装 Python（Windows 操作系统）一、下载 Python 安装包二、安装 Python三、测试&…...
【redis】创建集群
这里介绍的是创建redis集群的方式，一种是通过create-cluster配置文件创建部署在一个物理机上的伪集群，一种是先在不同物理机启动单体redis，然后通过命令行使这些redis加入集群的方式。 一，通过配置文件创建伪集群 进入redis源码…...
linux 配置nacos遇见的问题及解决办法
本次的集群是启动一个服务的三个不同端口，配置如下： 一.application.properties 加上下列配置，目的是使用自己的mysql数据库： spring.datasource.platformmysql db.num1 db.url.0jdbc:mysql://127.0.0.1:3306/nacos_config?s…...
小程序开发趋势：探索人工智能在小程序中的应用
第一章：引言 小程序开发近年来取得了快速的发展，成为了移动应用开发的重要一环。随着人工智能技术的飞速发展，越来越多的企业开始探索如何将人工智能应用于小程序开发中，为用户提供更智能、便捷的服务。本文将带您一起探索人工智能…...
基于埋点日志数据的网络流量统计 - PV、UV
水善利万物而不争，处众人之所恶，故几于道💦 文章目录 一、 网站总流量数统计 - PV 1. 需求分析 2. 代码实现 方式一 方式二 方式三：使用process算子实现 方式四：使用process算子实现 二、网站独立访客数统计 - UV 1. …...
cuda入门demo（2）——最基础的二方向sobel
⚠️主要是自己温习用，只保证代码正确性，不保证讲解的详细性。 今天继续总结cuda最基本的入门demo。很多教程会给你说conv怎么写，实际上sobel也是conv，并且conv本身已经用torch实现了。 之前在课题中尝试了sobel的变体࿰…...
软件外包开发的后台开发语言
在软件外包开发中，后台语言的选择通常取决于项目需求、客户偏好、团队技能和开发效率。今天和大家分享一些常用的后台语言及选择它们的原因，希望对大家有所帮助。北京木奇移动技术有限公司，专业的软件外包开发公司，欢迎交流合作。…...
自动驾驶感知系统-全球卫星定位系统
卫星定位系统 车辆定位是让无人驾驶汽车获取自身确切位置的技术，在自动驾驶技术中定位担负着相当重要的职责。车辆自身定位信息获取的方式多样，涉及多种传感器类型与相关技术。自动驾驶汽车能够持续安全可靠运行的一个关键前提是车辆的定位系统必须实时…...
数据结构 | 基本数据结构——队列
目录 一、何谓队列 二、队列抽象数据类型 三、用Python实现队列 四、模拟：传土豆 五、模拟：打印任务 5.1 主要模拟步骤 5.2 Python实现 一、何谓队列 队列是有序集合，添加操作发生在“尾部”，移除操作则发生在“头部”。新…...
QT在label上透明绘图（二）
前面步骤参考前一篇文章 QT在label上透明绘图 一、给TransparentLabel类添加double transparency;变量， 二、ui添加doublespinbox，调整透明参数 void MainWindow::on_doubleSpinBox_valueChanged(double arg1) {transparentLabel->transparencyarg1;…...
微信小程序使用editor富文本编辑器 以及回显 全屏弹窗的模式
<!--富文本接收的位置--><view class"white-box"><view class"title"><view class"yellow-fence"></view><view class"v1">教研记录</view></view><view class"add-btn"…...
在CSDN学Golang场景化解决方案（基于gin框架的web开发脚手架）
一，中间件统一实现Oauth2身份验证 在Golang基于Gin框架开发Web应用程序时，可以使用gin-oauth2来实现Oauth2身份验证。下面是简单的步骤： 安装gin-oauth2包：go get github.com/appleboy/gin-oauth2导入依赖：import &q…...
关于Express 5
目录 1、概述 2、Express 5的变化 2.1 弃用或删除内容的列表： app.param（name，fn）名称中的前导冒号（：） app.del() app.param（fn） 复数方法名 res.json࿰…...
ftrace 原理详细分析
》内核新视界文章汇总《 文章目录 ftrace 原理分析1 简介2 ftrace 的编译器支持2.1 HAVE_FUNCTION_TRACER 选项对 ftrace 的支持2.2 HAVE_DYNAMIC_FTRACE 选项对动态 ftrace 的支持 3 ftrace 的初始化4 function trace 流程5 总结 ftrace 原理分析 1 简介 ftrace 是一个内核…...
UWB定位技术和蓝牙AOA有哪些不同？-高精度室内定位技术对比
UWB超宽带定位 UWB（Ultra Wide Band ）即超宽带技术，它是一种无载波通信技术，利用纳秒级的非正弦波窄脉冲传输数据，因此其所占的频谱范围很宽。传统的定位技术是根据信号强弱来判别物体位置，信号强弱受外界…...
【RabbitMQ】golang客户端教程2——工作队列
任务队列/工作队列 在上一个教程中，我们编写程序从命名的队列发送和接收消息。在这一节中，我们将创建一个工作队列，该队列将用于在多个工人之间分配耗时的任务。 工作队列（又称任务队列）的主要思想是避免立即执行某些…...
芯旺微冲刺IPO，车规级MCU竞争白热化下的“隐忧”凸显
在汽车智能化和电动化发展带来的巨大蓝海市场下，产业链企业迎来了一波IPO小高潮。 日前，上海芯旺微电子技术股份有限公司（以下简称“芯旺微”）在科创板的上市申请已经被上交所受理，拟募资17亿元，用于投建车…...
HTML ＜s＞ 标签
例子 可以像这样标记删除线文本： 在 HTML 5 中，<s>仍然支持</s>已经不支持这个标签了。 浏览器支持 元素ChromeIEFirefoxSafariOpera<s>YesYesYesYesYes 所有浏览器都支持 <s> 标签。 定义和用法 <s> 标签可定义加…...
微信小程序 - scroll-view组件之上拉加载下拉刷新（解决上拉加载不触发）
前言 最近在做微信小程序项目中，有一个功能就是做一个商品列表分页限流然后实现上拉加载下拉刷新功能，遇到了一个使用scroll-viwe组件下拉刷新事件始终不触发问题，网上很多说给scroll-view设置一个高度啥的就可以解决，有些人设置了…...
CentOS 7下‘Development Tools’和‘开发工具’组有区别吗？实测告诉你答案
CentOS 7下‘Development Tools’与‘开发工具’的隐藏关联：技术细节全解析在Linux系统管理中，yum的软件包组功能一直是个既实用又充满谜团的领域。特别是当系统语言环境与软件包元数据语言不一致时，开发者们常常会遇到一个有趣的现象&#x…...
64_《智能体微服务架构企业级实战教程》授权与认证之授权认证集成测试
前言 配套视频教程： 在 Bilibili课堂、CSDN课程、51CTO学堂 同步发售，提供：源码+部署脚本+文档。 bilibili课堂视频教程：智能体微服务架构企业级实战教程_哔哩哔哩_bilibili CSDN课程视频教程：智能体微服务架构企业级实战教程_在线视频教程-CSDN程序员研修院 51CTO学堂…...
使用TaotokenCLI工具一键配置开发环境中的API密钥
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 使用Taotoken CLI工具一键配置开发环境中的API密钥 在团队协作或个人开发中，为每个项目或成员手动配置大模型API密钥和…...
别急着扔！12年老ThinkPad X230升级SSD和内存后，Win10流畅得像新电脑
12年老ThinkPad X230重生指南：极简升级打造流畅办公利器每次打开抽屉看到那台积灰的ThinkPad X230，总有种说不出的情感。这款2012年问世的经典商务本，曾陪伴无数人度过加班到凌晨的夜晚。如今性能确实有些力不从心，但直接丢弃又觉…...
高精度光照检测
光线检测仪，kotlin开发，调用手机感光模块检测室内外光照强度，用途多多，我主要用途孩子写作业检测光照保护视力。 食用方法∶打开即测，速度快，无广告，手机平视即可，无须直视光线。 买…...
完整指南：如何在5分钟内快速上手BioAge生物年龄计算工具包
完整指南：如何在5分钟内快速上手BioAge生物年龄计算工具包 【免费下载链接】BioAge Biological Age Calculations Using Several Biomarker Algorithms 项目地址: https://gitcode.com/gh_mirrors/bi/BioAge BioAge生物年龄计算工具包是一款基于R语言开发的强…...
Windows 11 LTSC安装微软商店的终极解决方案：3步恢复完整应用生态
Windows 11 LTSC安装微软商店的终极解决方案：3步恢复完整应用生态 【免费下载链接】LTSC-Add-MicrosoftStore Add Windows Store to Windows 11 24H2 LTSC 项目地址: https://gitcode.com/gh_mirrors/ltscad/LTSC-Add-MicrosoftStore LTSC-Add-MicrosoftStor…...
将deepseek v4 pro集成到codex桌面APP中使用
📕我是廖志伟，一名Java开发工程师、《Java项目实战——深入理解大型互联网企业通用技术》（基础篇）、（进阶篇）、《解密程序员的思维密码——沟通、演讲、思考的实践》作者、清华大学出版社签约作家、Java领域…...
终极虚拟显示器解决方案：ParsecVDisplay完整使用指南
终极虚拟显示器解决方案：ParsecVDisplay完整使用指南 【免费下载链接】parsec-vdd ✨ Perfect virtual display for game streaming 项目地址: https://gitcode.com/gh_mirrors/pa/parsec-vdd ParsecVDisplay是一个基于Parsec虚拟显示驱动(VDD)的独立应用程序…...
5分钟掌握m4s-converter：将B站缓存视频无损转换为MP4的终极指南
5分钟掌握m4s-converter：将B站缓存视频无损转换为MP4的终极指南 【免费下载链接】m4s-converter 一个跨平台小工具，将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 你是否曾在B站缓存了…...