API-表单全选反选案例

学习目标:

  • 掌握表单全选反选案例

学习内容:

  1. 案例
  2. css伪类选择器checked

案例:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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>//1.获取大复选框const checkAll = document.querySelector('#checkAll')//2.获取所有的小复选框const cks = document.querySelectorAll('.ck')//3.点击大复选框   注册事件checkAll.addEventListener('click', function () {//得到当前大复选框的选中状态// console.log(this.checked) //得到的是true 或者是false//4.遍历所有的小复选框  让小复选框的checked = 大复选框的checkedfor (let i = 0; i < cks.length; i++) {cks[i].checked = checkAll.checked}})//5.小复选框控制大复选框for (let i = 0; i < cks.length; i++) {//5.1给所有的小复选框添加点击事件cks[i].addEventListener('click', function () {//判断选中的小复选框个数  是不是等于  总的小复选框个数//一定要写到点击里面,因为每次要获得最新的个数// console.log(document.querySelectorAll('.ck:checked').length)// console.log(document.querySelectorAll('.ck:checked').length === cks.length)checkAll.checked = console.log(document.querySelectorAll('.ck:checked').length === cks.length)})}</script></body></html>

css伪类选择器checked

 <title>css伪类选择器checked</title><style>/* 选择被勾选的复选框 */.ck:checked {width: 20px;height: 20px;}</style>
</head><body><input type="checkbox" name="" id="" class="ck"><input type="checkbox" name="" id="" class="ck"><input type="checkbox" name="" id="" class="ck"><input type="checkbox" name="" id="" class="ck"></body>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/34639.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《看不影子的少年》一部探讨偏见与接纳的电视剧❗

《看不见影子的少年》这部电视剧以其独特的视角和深刻的主题 给我留下了深刻的印象。该剧讲述了一位与众不同的少年 他无法在阳光下留下影子&#xff0c;象征着他在社会中的孤独与不被理解 观看过程中&#xff0c;可以感受到少年内心的挣扎与渴望 他渴望被接纳&#xff0c;渴…

APM教程-SkyWalking安装和配置

SkyWalking简介 APM (Application Performance Management) 即应用性能管理&#xff0c;属于IT运维管理&#xff08;ITOM)范畴。主要是针对企业 关键业务的IT应用性能和用户体验的监测、优化&#xff0c;提高企业IT应用的可靠性和质量&#xff0c;保证用户得到良好的服务&#…

Java如何设置Map过期时间的的几种方法

一、技术背景 在实际的项目开发中&#xff0c;我们经常会使用到缓存中间件&#xff08;如redis、MemCache等&#xff09;来帮助我们提高系统的可用性和健壮性。 但是很多时候如果项目比较简单&#xff0c;就没有必要为了使用缓存而专门引入Redis等等中间件来加重系统的复杂性…

oracle开放某些视图给特定用户,查询报视图不存在问题

以sysdba身份登录到Oracle数据库。 创建新用户。例如&#xff0c;创建一个名为new_user的用户&#xff0c;密码为password&#xff1a; CREATE USER new_user IDENTIFIED BY password;为新用户分配表空间和临时表空间。例如&#xff0c;将表空间users和临时表空间temp分配给新…

数据库精选题(七)(综合模拟题二)

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;数据库 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 一、名词解释 1、事务 2、弱实体集 3、正…

chatglm系列知识

一、目录 chatglm 是什么语言模型与transformer decoder 的区别解释prefix LM与Cause LMchatglm&#xff08;prefix LM&#xff09;与decoder-only LM 核心区别glm 架构chatglm 预训练方式chatglm 微调chatglm与chatglm2、chatglm3的区别chatglm 激活函数采用gelu, 为什么chat…

06 - matlab m_map地学绘图工具基础函数 - 绘制海岸线

06 - matlab m_map地学绘图工具基础函数 - 绘制海岸线 0. 引言1. 关于m_coast2. 关于m_gshhs3. 关于m_gshhs_c、m_gshhs_I、m_gshhs_i、m_gshhs_h、m_gshhs_f4. 关于m_shaperead5. 结语 0. 引言 本篇介绍下m_map中添加绘制海岸线的一系列函数及其用法&#xff0c;主要函数包括m…

PHP框架详解:Symfony框架的深度剖析

PHP框架详解&#xff1a;Symfony框架的深度剖析 摘要&#xff1a; Symfony是当前最受欢迎的PHP框架之一&#xff0c;它以其强大的功能和灵活性而闻名。本文将详细介绍Symfony框架的核心概念、架构、组件以及其实践应用&#xff0c;帮助读者深入理解这一框架的优势和使用场景。…

【HTML03】HTML表单语法笔记,附带案例-作业

文章目录 表单概述一、表单容器&#xff08;form&#xff09;二、控件相关单词获取本次课程作业和案例 表单概述 允许用户输入信息&#xff0c;和提交信息的-收集用户信息。 表单&#xff1a;表单容器表单控件组成。 控件&#xff1a;输入框、单选按钮、多选、下拉框、多行文…

分布式数据库系统MyCat

MyCat简介 MyCat是一个开源的分布式数据库系统&#xff0c;是一个实现了MySQL协议的服务器&#xff0c;前端用户可以把它看作是一个数据库代理&#xff0c;用MySQL客户端工具和命令行访问&#xff0c;而其后端可以用MySQL原生协议与多个MySQL服务器通信&#xff0c;也可以用JD…

FreeRTOS实时操作系统

1.认识实施操作系统 1.1 裸机和实时操作系统 裸机&#xff1a; 早期嵌入式开发没有嵌入式操作系统的概念&#xff0c;直接操作裸机&#xff0c;在裸机上写程序&#xff0c;比如用51单片机基本就没有操作系统的概念。 通常把程序设计为前后台系统&#xff0c;主要分为两部分&a…

Redis(超详细)

Redis Redis概念&#xff1a; Redis是开源的&#xff0c;遵循BSD的&#xff0c;基于内存数据存储&#xff0c;被用于作为数据库、缓存机制、消息中间件&#xff1b; Redis的特点&#xff1a; 1.高性能key/valu内存xing数据库&#xff1b; 2.支持丰富的数据类型 3.支持持久化&am…

信息系统分析与设计:重点内容|UML在线绘制|数据库技术

目录 UML在线绘图工具信息系统分析与设计第1章 系统思想第2章 信息、管理与信息系统第3章 信息系统建设概论&#x1f31f;第4章 系统规划&#x1f31f;第5章 系统分析概述第6章 流程建模&#x1f31f;业务流程图DFD数据流图&#x1f31f;数据字典 第7章 用例建模(用例图)&#…

Docker搭建yolov8并训练、验证、推理化学仪器数据集

目录 1、安装docker 2、创建yolov8镜像 3、下载代码包 4、下载模型预训练权重 5、制作数据集 6、训练、验证及推理 &#xff08;1&#xff09;训练 &#xff08;2&#xff09;验证 &#xff08;3&#xff09;推理 中文标签显示问题 本文通过docker的方式搭建yolov8运…

OnlyOffice:现代办公的最佳选择

目录 安装 使用 评价 对比&#xff08;与WPS&#xff09; 总结 在当今的数字化办公时代&#xff0c;选择一款功能全面且易于使用的办公软件至关重要。OnlyOffice作为一款现代化的办公软件&#xff0c;凭借其强大的功能和友好的用户体验&#xff0c;逐渐成为了众多企业和个…

C++ type list 模板

C 实现一个type list 模板&#xff0c;在编译期计算。这个type list主要有构造&#xff0c;列表头类型&#xff0c;列表尾类型&#xff0c;concat操作&#xff0c;去除列表元素重复&#xff0c;获取指定元素&#xff0c;删除指定元素的操作。实现代码贴在下面&#xff1a; #pr…

Linux系统编程项目——FTP网盘

目录 一、项目实现的功能 二、项目实现思路 2.1 socket服务器和客户端开发步骤&#xff1a; 2.2 指令的实现思路&#xff1a; 三、项目用到的函数 3.1 判断文件是否存在函数access()原型和头文件&#xff1a; 3.2 字符串输入函数fgets()原型和头文件&#xff1a; 3.3 字…

无线麦克风哪个品牌音质最好,一文告诉你无线领夹麦克风怎么挑选

随着直播带货和个人视频日志&#xff08;Vlog&#xff09;文化的兴起&#xff0c;以及自媒体内容创作的蓬勃发展&#xff0c;我们见证了麦克风行业的迅猛发展。在这一浪潮中&#xff0c;无线领夹麦克风以其无与伦比的便携性和操作效率&#xff0c;迅速赢得了广大视频制作者的喜…

前端HTML/CSS知识点系列

1. 什么是块级格式化上下文&#xff1f;【BFC(Block formatting context)】 BFC&#xff08;Block FormattingContext&#xff0c;块级格式化上下文&#xff09;是一个独立的渲染区域&#xff0c;其中的元素的布局不会受到外部元素的影响&#xff0c;反之亦然。BFC的创建有助于…

docker环境部署ruoyi系统前后端分离项目

创建局域网 docker network create net-ry 安装Redis 1 安装 创建两个目录 mkdir -p /data/redis/{conf,data} 上传redis.conf文件到/data/redis/conf文件夹中 cd /data/redis/conf 3.2 配置redis.conf文件 配置redis.conf文件&#xff1a; redis.conf文件配置注意&…