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

JavaScript基础(25)_dom查询练习（二）

news 2026/5/20 0:38:08 
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>dom查询练习二</title><link rel="stylesheet" href="../browser_default_style/reset.css"><style>form {margin: 10px 0px 0px 10px;}p {display: inline-block;}input{color: green;}span {font-family: 'Courier New', Courier, monospace;}.li {margin: 5px 0px 10px 0px;}</style><script>window.onload = function () {// 获取多选框var SelectALL_OrNot = document.getElementsByName("AllSelect_NoneSelect")[0];var item = document.getElementsByName("item");// 为 "第一个按钮:全选" 绑定事件var AllSelect = document.getElementById("AllSelect");AllSelect.onclick = function () {for (var i = 0; i < item.length; i++) {item[i].checked = true;}SelectALL_OrNot.checked = true;}// 为 "第二个按钮：全不选" 绑定事件var NoneSelect = document.getElementById("NoneSelect");NoneSelect.onclick = function () {for (var i = 0; i < item.length; i++) {item[i].checked = false;}SelectALL_OrNot.checked = false;}// 为 "第三个按钮：反选" 绑定事件var AgainestSelect = document.getElementById("AgainestSelect");AgainestSelect.onclick = function () {for (var i = 0; i < item.length; i++) {// 相当于：if(item[i].checked == true){item[i].checked = false;} else item[i].checked = true;  item[i].checked = !item[i].checked;}}// 为 "第四个按钮：提交" 绑定事件var Submit = document.getElementById("Submit");Submit.onclick = function () {for (var i = 0; i < item.length; i++) {if (item[i].checked == true) {alert(item[i].value);}}}// 为 "多选框：全选/全不选" 绑定事件// 条件：四个多选框一旦有一个没选，则 "全选/全不选"多选框 设置为不选中（false）状态SelectALL_OrNot.onclick = function () {for (var i = 0; i < item.length; i++) {// "全选/全不选"多选框 一旦设置选中,则 "所有列表项" 都选中;反之也如此。item[i].checked = SelectALL_OrNot.checked;}}// 为 "多选框：列表项" 绑定事件// 条件：1、四个多选框都选中，则 "全选/全不选"多选框 默认设置为选中（true）状态;// 条件：2、一旦有一个没选中则设置为不选中（false）状态。for (var i = 0; i < item.length; i++) {item[i].onclick = function () {SelectALL_OrNot.checked = true;for (j = 0; j < item.length; j++) {if (item[j].checked == false) {SelectALL_OrNot.checked = false;break;}}}}}</script>
</head><body><form action=""><p>你爱好的运动是？</p><input type="checkbox" name="AllSelect_NoneSelect" class="All"><span>全选/全不选</span><br><p class="li"><input type="checkbox" name="item" value="足球">足球<input type="checkbox" name="item" value="篮球" checked>篮球<input type="checkbox" name="item" value="羽毛球">羽毛球<input type="checkbox" name="item" value="乒乓球">乒乓球</p><br><input type="button" id="AllSelect" value="全选"><input type="button" id="NoneSelect" value="全不选"><input type="button" id="AgainestSelect" value="反选"><input type="button" id="Submit" value="提交"></form>
</body></html>

相关文章：

JavaScript基础(25)_dom查询练习（二）

<!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><title>dom查询练习二</title><link rel"stylesheet" href"../browser_default_style/reset.css"><style>form {margi…...

编程日记 2024/1/9 4:19:53

【React系列】React生命周期、setState深入理解、 shouldComponentUpdate和PureComponent性能优化、脚手架

本文来自#React系列教程&#xff1a;https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. 生命周期 1.1. 认识生命周期 很多的事物都有从创建到销毁的整个过程&#xff0c;这个过程称之为是生命周期&…...

编程日记 2024/1/9 4:18:52

一文初步了解slam技术

本文初步介绍slam技术&#xff0c;主要是slam技术的概述&#xff0c;涉及技术原理、应用场景、分类、以及各自优缺点&#xff0c;和slam技术的未来展望。 &#x1f3ac;个人简介&#xff1a;一个全栈工程师的升级之路&#xff01; &#x1f4cb;个人专栏&#xff1a;slam精进之…...

编程日记 2024/1/9 4:17:51

滑动窗口协议仿真（2024）

1.题目描述 滑动窗口协议以基于分组的数据传输协议为特征&#xff0c;该协议适用于在数据链路层以及传输层中对按 顺序传送分组的可靠性要求较高的环境。在长管道传输过程&#xff08;特别是无线环境&#xff09;中&#xff0c;相应的滑动窗口 协议可实现高效的重传恢复。附录 …...

编程日记 2024/1/9 4:15:50

uniapp上传文件时用到的api是什么？格式是什么？

在UniApp中&#xff0c;你可以使用uni.uploadFile()方法来上传文件。这是一个异步方法&#xff0c;用于将本地资源上传到服务器。 该方法的基本格式如下&#xff1a; uni.uploadFile({url: 上传接口地址,filePath: 要上传的文件路径,name: 后端接收的文件参数名,formData: {/…...

编程日记 2024/1/9 4:14:48

Java面试——框架篇

1、Spring框架中的单例bean是线程安全的吗&#xff1f; 所谓单例就是所有的请求都用一个对象来处理&#xff0c;而多例则指每个请求用一个新的对象来处理。 结论&#xff1a;线程不安全。 Spring框架中有一个Scope注解&#xff0c;默认的值就是singleton&#xff0c;单例的。一…...

编程日记 2024/1/9 4:12:46

GO语言笔记1-安装与hello world

SDK开发工具包下载 Go语言官网地址&#xff1a;golang.org&#xff0c;无法访问Golang中文社区&#xff1a;首页 - Go语言中文网 - Golang中文社区下载地址&#xff1a;Go下载 - Go语言中文网 - Golang中文社区 尽量去下载稳定版本&#xff0c;根据使用系统下载压缩包格式的安装…...

编程日记 2024/1/9 4:08:44

指针传参误区

C语言中指针作为形参传递时&#xff0c;func&#xff08;*a, *b&#xff09; 这种形式的话&#xff0c;是无法通过简单的 ab来修改的&#xff0c;在函数体内a的地址确实被修改成b的地址了&#xff0c;但是当函数执行结束时&#xff0c;a的地址会重新回到原本的地址里面&#xf…...

编程日记 2024/1/9 4:07:43

力扣-42.接雨水

题目&#xff1a; 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组[0,1,0,2…...

编程日记 2024/1/9 4:05:40

LeetCode-移动零（283）

题目描述&#xff1a; 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 思路&#xff1a; 这里的思路跟以前做过的去重复数字的思路有点像&…...

编程日记 2024/1/9 4:04:39

文件系统与日志分析

一&#xff0c;文件系统 &#xff08;一&#xff09;inode 和block概述 1&#xff0c;文件数据包括元信息与实际数据 2&#xff0c;文件存储在硬盘上&#xff0c;硬盘最小存储单位是“扇区”&#xff0c;每个扇区存储512字节 3&#xff0c;block (块) 连续的八个扇区组成一…...

编程日记 2024/1/9 4:01:37

labview 与三菱FX 小型PLC通信(OPC)

NI OPC服务器与三菱FX3U PLC通讯方法 一、新建通道名称为&#xff1a;MIT 二、选择三菱FX系列 三、确认端口号相关的参数&#xff08;COM端&#xff1a;7.波特率&#xff1a;9600&#xff0c;数据位&#xff1a;7&#xff0c;校验&#xff1a;奇校验&#xff0c;停止位&#xf…...

编程日记 2024/1/9 4:00:36

掌握Linux网络配置：价格亲民，操作简便！

前言 在Linux系统中&#xff0c;网络配置是实现连接、通信和安全的重要一环。无论你是初学者还是有经验的用户&#xff0c;掌握网络配置命令能帮助你轻松管理网络接口、设置IP地址以及查看连接状态。以下是一些关键命令和示例&#xff0c;让你快速掌握网络操作的精髓&#xff…...

编程日记 2024/1/9 3:56:32

郑州大学算法设计与分析实验2

判断题 1 #include<bits/stdc.h> using namespace std;const int N 50; int f[N], n;int main() { // freopen("1.in", "r", stdin);ios::sync_with_stdio(false);cin.tie(0);cout.tie(0);cin >> n;f[1] 1; f[2] 1;for(int i 3; i &l…...

编程日记 2024/1/9 3:55:30

【CMake】1. VSCode 开发环境安装与运行

CMake 示例工程代码 https://github.com/LABELNET/cmake-simple 插件 使用 VSCode 开发C项目&#xff0c;安装 CMake 插件 CMakeCMake ToolsCMake Language Support &#xff08;建议&#xff0c;语法提示) 1. 配置 CMake Language Support , Windows 配置 donet 环境 这…...

编程日记 2024/1/9 3:53:28

使用vue3+＜script setup＞+element-plus中el-table前端切片完成分页效果

<template><div><el-table :data"visibleData" :row-key"row > row.id"><el-table-column prop"name" label"姓名"></el-table-column><el-table-column prop"age" label"年龄&qu…...

编程日记 2024/1/9 3:51:26

vue 中 computed 和 watch 的区别

在Vue中&#xff0c;computed和watch都是用于监听数据的变化&#xff0c;并且根据变化做出相应的反应。 computed是一个计算属性&#xff0c;它会根据依赖的数据的变化自动计算得出一个新的值&#xff0c;并且具有缓存的特性。当依赖的数据发生变化时&#xff0c;computed属性…...

编程日记 2024/1/9 3:50:25

gephi——graphviz插件设置

gephi_graphviz插件设置 以下是我总结出来的一点经验 1. 安装graphviz软件&#xff0c;请见作者其他博客 2. 安装gephi 插件&#xff0c;并激活 3. 运行graphviz布局&#xff0c;会遇到找不到dot问题 问题描述&#xff1a;Graphviz process error X There was an error launc…...

编程日记 2024/1/9 3:49:24

wireshark抓包分析HTTP协议，HTTP协议执行流程，

「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》 使用WireShark工具抓取「HTTP协议」的数据包&#…...

编程日记 2024/1/9 3:48:23

Linux第13步_安装“vim编辑器”及应用介绍

学习“磁盘重新分区”后&#xff0c;嵌入式Linux系统环境搭建进入安装“vim编辑器”这个环节。vim编辑器可以用来修改文件&#xff0c;在后期使用中&#xff0c;会经常用到。 1、安装“vim编辑器” 输入“sudo apt-get install vim回车”&#xff0c;就可以执行安装“vim编辑…...

编程日记 2024/1/9 3:47:21

【2026】知云文献翻译安装使用指南：学术PDF划选即译，研究生必备工具

读英文文献最烦的不是词汇&#xff0c;是格式。复制到翻译软件&#xff0c;格式全乱、公式变问号、图注和正文混在一起。知云文献翻译的解法是直接在PDF里划选翻译&#xff0c;格式不动&#xff0c;原文译文左右对照&#xff0c;不用来回切换窗口。 这篇从安装到核心功能配置一…...

编程新知 2026/5/20 0:18:47

USER.md 渐进式沉淀实战：Hermes Agent 用户画像构建的 4 阶段演进路径

1. USER.md 不是静态配置，而是用户认知的渐进式快照 大多数人第一次打开 USER.md 文件时，会下意识把它当成一个“填空题”：姓名、职位、技术栈、常用工具……填完就提交，以为完成了人格初始化。我试过三次——第一次在内部 PoC 项目里，第二次在客户交付现场，第三次是在给…...

编程新知 2026/5/19 23:50:09

告别阿里云物联网平台：用免费公共MQTT服务器玩转ESP32远程监控

告别商业云平台&#xff1a;用免费公共MQTT服务器实现ESP32远程监控 在物联网项目开发中&#xff0c;远程数据传输是核心需求之一。许多开发者习惯性选择阿里云、腾讯云等商业物联网平台&#xff0c;却常常被复杂的配置流程、高昂的服务费用所困扰。实际上&#xff0c;对于个人…...

编程新知 2026/5/19 23:33:18

ESP32 OTA升级避坑指南：用Python脚本一键搭建本地服务器，告别手动配置

ESP32 OTA升级实战&#xff1a;Python自动化方案与高频问题破解 当你的ESP32设备部署在难以物理接触的场合——比如嵌入墙体的智能开关、高架桥上的环境监测节点&#xff0c;或是旋转机械内部的振动传感器&#xff0c;固件更新就成了开发者的噩梦。传统烧录器方案需要专人携带设…...

编程新知 2026/5/19 21:58:33

告别网络玄学：手把手教你用寄存器调试法搞定YT8521 PHY‘ping不通’故障

寄存器调试实战&#xff1a;用YT8521 PHY案例解析RGMII时序优化 当一块嵌入式开发板的网络接口出现"能发不能收"的诡异现象时&#xff0c;多数工程师的第一反应往往是检查驱动配置或网线连接。但在实际项目中&#xff0c;这种看似简单的"ping不通"问题&…...

编程新知 2026/5/19 21:45:05

别再只下载不固化！紫光同创FPGA/CPLD烧录到Flash的保姆级避坑指南

紫光同创FPGA/CPLD烧录实战&#xff1a;从临时下载到永久固化的全流程精解 第一次成功将程序下载到紫光同创FPGA开发板时的兴奋&#xff0c;很快被一个残酷现实浇灭——断电重启后&#xff0c;所有心血归零。这个场景对许多初学者来说再熟悉不过。JTAG下载只是起点&#xff0c;…...

编程新知 2026/5/19 21:17:58

Kettle 9.3 下载安装全攻略：从官网变动的坑到Hadoop Shims的正确配置

Kettle 9.3 下载安装全攻略&#xff1a;从官网变动的坑到Hadoop Shims的正确配置 如果你最近尝试下载Kettle 9.3&#xff0c;可能会发现一个令人困惑的现象&#xff1a;按照老教程访问SourceForge上的Pentaho项目页面&#xff0c;却找不到熟悉的下载按钮。这不是你的问题&#…...

编程新知 2026/5/19 21:06:55

告别BiSeNet的臃肿：手把手教你用STDC网络在MMSegmentation中实现更快的实时语义分割

从BiSeNet到STDC&#xff1a;在MMSegmentation中构建高效实时语义分割模型的实战指南 当你在深夜调试一个需要实时反馈的无人机视觉系统时&#xff0c;BiSeNet的多路径结构是否正在消耗你宝贵的计算资源&#xff1f;STDC网络的出现&#xff0c;为这类场景带来了新的可能性。本文…...

编程新知 2026/5/19 20:50:54

N_m3u8DL-RE：终极跨平台流媒体下载工具，轻松保存加密视频内容

N_m3u8DL-RE&#xff1a;终极跨平台流媒体下载工具&#xff0c;轻松保存加密视频内容 【免费下载链接】N_m3u8DL-RE Cross-Platform, modern and powerful stream downloader for MPD/M3U8/ISM. English/简体中文/繁體中文. 项目地址: https://gitcode.com/GitHub_Trending/…...

编程新知 2026/5/19 20:39:26

2025最新版PHP加密系统MENC加密系统 V2.4.0 含搭建教程

内容目录一、详细介绍二、效果展示1.部分代码2.效果图展示三、学习资料下载一、详细介绍 很牛逼的一款加密系统&#xff0c;PHP代码加密系统是一个值得信赖的工具&#xff0c;它可以帮助开发者保护自己的代码不受恶意攻击和盗用。无论是个人开发者还是企业用户&#xff0c;都可…...

编程新知 2026/5/19 20:27:40