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 {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…...
【React系列】React生命周期、setState深入理解、 shouldComponentUpdate和PureComponent性能优化、脚手架
本文来自#React系列教程:https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. 生命周期 1.1. 认识生命周期 很多的事物都有从创建到销毁的整个过程,这个过程称之为是生命周期&…...
一文初步了解slam技术
本文初步介绍slam技术,主要是slam技术的概述,涉及技术原理、应用场景、分类、以及各自优缺点,和slam技术的未来展望。 🎬个人简介:一个全栈工程师的升级之路! 📋个人专栏:slam精进之…...
滑动窗口协议仿真(2024)
1.题目描述 滑动窗口协议以基于分组的数据传输协议为特征,该协议适用于在数据链路层以及传输层中对按 顺序传送分组的可靠性要求较高的环境。在长管道传输过程(特别是无线环境)中,相应的滑动窗口 协议可实现高效的重传恢复。附录 …...
uniapp上传文件时用到的api是什么?格式是什么?
在UniApp中,你可以使用uni.uploadFile()方法来上传文件。这是一个异步方法,用于将本地资源上传到服务器。 该方法的基本格式如下: uni.uploadFile({url: 上传接口地址,filePath: 要上传的文件路径,name: 后端接收的文件参数名,formData: {/…...
Java面试——框架篇
1、Spring框架中的单例bean是线程安全的吗? 所谓单例就是所有的请求都用一个对象来处理,而多例则指每个请求用一个新的对象来处理。 结论:线程不安全。 Spring框架中有一个Scope注解,默认的值就是singleton,单例的。一…...
GO语言笔记1-安装与hello world
SDK开发工具包下载 Go语言官网地址:golang.org,无法访问Golang中文社区:首页 - Go语言中文网 - Golang中文社区下载地址:Go下载 - Go语言中文网 - Golang中文社区 尽量去下载稳定版本,根据使用系统下载压缩包格式的安装…...
指针传参误区
C语言中指针作为形参传递时,func(*a, *b) 这种形式的话,是无法通过简单的 ab来修改的,在函数体内a的地址确实被修改成b的地址了,但是当函数执行结束时,a的地址会重新回到原本的地址里面…...
力扣-42.接雨水
题目: 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水。 示例 1: 输入:height [0,1,0,2,1,0,1,3,2,1,2,1] 输出:6 解释:上面是由数组[0,1,0,2…...
LeetCode-移动零(283)
题目描述: 给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序。 请注意 ,必须在不复制数组的情况下原地对数组进行操作。 思路: 这里的思路跟以前做过的去重复数字的思路有点像&…...
文件系统与日志分析
一,文件系统 (一)inode 和block概述 1,文件数据包括元信息与实际数据 2,文件存储在硬盘上,硬盘最小存储单位是“扇区”,每个扇区存储512字节 3,block (块) 连续的八个扇区组成一…...
labview 与三菱FX 小型PLC通信(OPC)
NI OPC服务器与三菱FX3U PLC通讯方法 一、新建通道名称为:MIT 二、选择三菱FX系列 三、确认端口号相关的参数(COM端:7.波特率:9600,数据位:7,校验:奇校验,停止位…...
掌握Linux网络配置:价格亲民,操作简便!
前言 在Linux系统中,网络配置是实现连接、通信和安全的重要一环。无论你是初学者还是有经验的用户,掌握网络配置命令能帮助你轻松管理网络接口、设置IP地址以及查看连接状态。以下是一些关键命令和示例,让你快速掌握网络操作的精髓ÿ…...
郑州大学算法设计与分析实验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…...
【CMake】1. VSCode 开发环境安装与运行
CMake 示例工程代码 https://github.com/LABELNET/cmake-simple 插件 使用 VSCode 开发C项目,安装 CMake 插件 CMakeCMake ToolsCMake Language Support (建议,语法提示) 1. 配置 CMake Language Support , Windows 配置 donet 环境 这…...
使用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…...
vue 中 computed 和 watch 的区别
在Vue中,computed和watch都是用于监听数据的变化,并且根据变化做出相应的反应。 computed是一个计算属性,它会根据依赖的数据的变化自动计算得出一个新的值,并且具有缓存的特性。当依赖的数据发生变化时,computed属性…...
gephi——graphviz插件设置
gephi_graphviz插件设置 以下是我总结出来的一点经验 1. 安装graphviz软件,请见作者其他博客 2. 安装gephi 插件,并激活 3. 运行graphviz布局,会遇到找不到dot问题 问题描述:Graphviz process error X There was an error launc…...
wireshark抓包分析HTTP协议,HTTP协议执行流程,
「作者主页」:士别三日wyx 「作者简介」:CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」:对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》 使用WireShark工具抓取「HTTP协议」的数据包&#…...
Linux第13步_安装“vim编辑器”及应用介绍
学习“磁盘重新分区”后,嵌入式Linux系统环境搭建进入安装“vim编辑器”这个环节。vim编辑器可以用来修改文件,在后期使用中,会经常用到。 1、安装“vim编辑器” 输入“sudo apt-get install vim回车”,就可以执行安装“vim编辑…...
刚刚!美团开源LongCat-Next,全模态模型保姆级教程(非常详细),从入门到精通,建议收藏!
昨天下午刷到了美团龙猫团队又开源了一个新模型-LongCat-Next。 这次有所不同,是一个原生全模态模型,可以接受文本、语音、图像的输入,生成文本、语音、图像,激活参数3B。 在训练上,通过分词器-反分词器对࿰…...
ReadMe.md
一、先告诉你:这个项目是干嘛的? 这是一套网页自动化 E2E 测试框架用来自动打开浏览器 → 自动点页面 → 自动校验功能是否正常 二、最关键:你必须先做的 1 件事(否则跑不起来) 在项目根目录创建 .env 文件 项目根目录…...
3步颠覆直播保存方式:抖音直播下载神器让精彩内容永久留存
3步颠覆直播保存方式:抖音直播下载神器让精彩内容永久留存 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 你是否曾经为错过心仪主播的直播而惋惜?是否遇到过想要保存的直播内容在结束…...
BGE-M3快速入门:多语言文本相似度分析从零到一
BGE-M3快速入门:多语言文本相似度分析从零到一 1. 引言:从“关键词匹配”到“语义理解” 你有没有遇到过这样的场景?在搜索引擎里输入“苹果”,结果既出现了水果,也出现了手机公司。或者,你想找“如何学习…...
Hive3.1.3安装避坑指南:从下载到配置的完整流程(含MySQL元数据迁移)
Hive3.1.3企业级部署实战:MySQL元数据管理与性能调优全解析 在大数据生态系统中,Hive始终扮演着数据仓库核心组件的角色。尽管实时计算框架日益流行,但据统计,超过78%的企业级数据仓库仍在使用Hive处理TB级以上的历史数据分析任务…...
问题解决:AI股票分析师启动失败?自查脚本与Ollama服务加载
问题解决:AI股票分析师启动失败?自查脚本与Ollama服务加载 1. 引言 你满怀期待地部署了那个“AI股票分析师”镜像,点击启动,然后……页面一片空白,或者提示服务不可用。这种感觉就像准备大展拳脚时,发现工…...
【STM32HAL库实战】DAC精准输出0-3.3V可调电压与ADC自检闭环
1. DAC与ADC的基础原理 在嵌入式系统中,数字信号和模拟信号的相互转换是常见需求。STM32微控制器内置了DAC(数字模拟转换器)和ADC(模拟数字转换器)模块,让我们能够轻松实现这种转换。 DAC的作用是将数字量转…...
【Python内存管理终极指南】:20年专家亲授智能体内存优化的5大架构设计图与3个致命误区
第一章:Python智能体内存管理的核心原理与演进脉络 Python的内存管理并非由开发者手动控制,而是由解释器内置的“智能体”协同完成——它融合了引用计数、循环垃圾回收(GC)和内存池机制三重策略,在运行时动态权衡效率与…...
保姆级教程:在QT中配置qcustomplot实现热力图(含常见问题解决方案)
QT中qcustomplot热力图实战:从配置到交互优化的完整指南 第一次在QT项目中尝试用qcustomplot绘制热力图时,我被数据映射和实时刷新的问题困扰了整整两天。直到凌晨三点调试通过的那一刻,才真正理解这个强大可视化工具的精妙之处。本文将分享那…...
Suricata在CentOS7上的性能优化:如何配置网卡混杂模式与端口聚合
Suricata在CentOS7上的性能优化:网卡混杂模式与端口聚合实战指南 当企业网络流量突破千兆级别时,传统单网卡监控方案往往力不从心。我曾为某金融客户部署Suricata时,单台服务器每天要处理超过2TB的流量数据,正是通过下文介绍的网卡…...
