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设置一个高度啥的就可以解决，有些人设置了…...
中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试
作者：Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位：中南大学地球科学与信息物理学院论文标题：BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接：https://arxiv.…...
《Playwright：微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络，将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具，支持 Chrome、Firefox、Safari 等主流浏览器，提供多语言 API（Python、JavaScript、Java、.NET）。它的特点包括&a…...
第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明
AI 领域的快速发展正在催生一个新时代，智能代理（agents）不再是孤立的个体，而是能够像一个数字团队一样协作。然而，当前 AI 生态系统的碎片化阻碍了这一愿景的实现，导致了“AI 巴别塔问题”——不同代理之间…...
Spring AI 入门：Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天，Spring AI 作为 Spring 生态系统的新生力量，正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务（如 OpenAI、Anthropic）的无缝对接&…...
Java入门学习详细版（一）
大家好，Java 学习是一个系统学习的过程，核心原则就是“理论 实践 坚持”，并且需循序渐进，不可过于着急，本篇文章推出的这份详细入门学习资料将带大家从零基础开始，逐步掌握 Java 的核心概念和编程技能。 …...
A2A JS SDK 完整教程：快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...
Windows安装Miniconda
一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...
Spring AI Chat Memory 实战指南：Local 与 JDBC 存储集成
一个面向 Java 开发者的 Sring-Ai 示例工程项目，该项目是一个 Spring AI 快速入门的样例工程项目，旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计，每个模块都专注于特定的功能领域，便于学习和…...
Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强：基于微服务与容器化的解决方案
在大数据时代，海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构，在处理大规模数据抓取任务时展现出强大的能力。然而，随着业务规模的不断扩大和数据抓取需求的日益复杂，传统…...
相关类相关的可视化图像总结
目录 一、散点图 二、气泡图 三、相关图 四、热力图 五、二维密度图 六、多模态二维密度图 七、雷达图 八、桑基图 九、总结 一、散点图 特点 通过点的位置展示两个连续变量之间的关系，可直观判断线性相关、非线性相关或无相关关系，点的分布密…...