前端学习之DOM编程案例:全选反选案例

代码 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>全选反选</title>
</head>
<body><input type="checkbox" id="all">全选<ul><li><input type="checkbox" class="all_check">看书</li><li><input type="checkbox" class="all_check">打篮球</li><li><input type="checkbox" class="all_check">唱</li><li><input type="checkbox" class="all_check">跳</li><li><input type="checkbox" class="all_check">rap</li></ul><script>let all = document.querySelector('#all')let all1 = document.querySelectorAll('ul>li>input')all.onclick=function(){if(all.checked == true){for (i of all1){i.checked = true}}else{for(i of all1){i.checked = false}}}</script>
</body>
</html>

结果


不嫌弃的点点关注,点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧

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

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

相关文章

停用net stop mysql 服务名无效。

net stop mysql服务名 错误截图 解决方案 1. 按下 Win R 键&#xff0c;然后输入 services.msc 并按下 Enter 键&#xff0c;打开服务管理器 &#xff0c;查找与 MySQL 相关的服务 重新运行 net stop mysql服务名

CTF之社工-初步收集

题目就一个刷钻网站&#xff08;假的&#xff09; 扫描一下目录 发现还有一个登录界面 时间多的可以爆破一下&#xff08;反正我爆不出来&#xff09;&#xff0c;接着我们下载那个压缩包看看 发现是一个钓鱼小软件 没发现什么有用的信息那我们就去wireshark看看数据包喽&#…

Vue - 你可以说一说Veu3采用的Proxy与Vue2采用的defineProperty相比有什么优势吗

难度级别:中高级及以上 提问概率:85% 在Vue3中,双向绑定的核心API采用了ES6的Proxy代理方案,替换了Vue2的Object.defineProperty方案,那么这是为什么呢? 先说Object.defineProperty,我们知道它主要通过内部的set和get方法,劫持需要处理…

2.AK/SK鉴权

目录 什么是AK/SK AK/SK使用机制 时序图 什么是AK/SK 在云服务中&#xff0c;AK&#xff08;Access Key ID&#xff09;和SK&#xff08;Secret Access Key&#xff09;是访问云服务API的关键凭证对&#xff0c;主要用于身份验证和授权。AK是用户访问云服务的身份标识&…

1.数据结构和算法

文章目录 数据结构逻辑结构集合结构线性结构树形结构图形结构 物理结构顺序存储结构链式存储结构 算法基本特性目标 总结数据结构总结算法总结 数据结构 「数据结构」指的是&#xff1a;数据的组织结构&#xff0c;用来组织、存储数据。 逻辑结构 逻辑结构&#xff08;Logic…

Win安装SSH教程

在Windows操作系统上安装和配置SSH&#xff08;Secure Shell&#xff09;可以让你通过加密的方式远程连接和管理其他计算机或服务器。以下是安装和配置SSH的简单教程&#xff1a; 下载OpenSSH for Windows&#xff1a; 访问OpenSSH for Windows的官方网站&#xff08;https://g…

Linux(CentOS7)部署 y-api 接口管理平台

目录 前言 前置环境 mongodb node 安装 y-api 部署页面 启动 y-api 基本使用教程 前言 前后端分离时代&#xff0c;前后端通过接口文档来协作开发项目。一般开发过程中&#xff0c;由后端先编写接口文档&#xff0c;然后交付给前端&#xff0c;这时候前后端都根据这个…

HarmonyOS实战开发-如何实现蓝牙设备发现、配对、取消配对功能。

介绍 蓝牙技术是一种无线数据和语音通信开放的全球规范&#xff0c;它是基于低成本的近距离无线连接&#xff0c;为固定和移动设备建立通信环境的一种特殊的近距离无线技术连接。本示例通过ohos.bluetooth 接口实现蓝牙设备发现、配对、取消配对功能。实现效果如下&#xff1a…

Spring——框架介绍

每一个Java技术中都会存在一个“核心对象”&#xff0c;这个核心对象来完成主要任务为了得到核心对象&#xff0c;需要创建若干个辅助对象&#xff0c;从而导致开发步骤增加JDBC中 JDBC 核心对象——PreparedStatement 通过DriverManager得到数据库厂商提供的Driver对象DriverM…

Mysql底层原理二:Buffer Pool

1.数据区 就是描述信息缓存页这块&#xff0c;用来存放从磁盘加载的数据页&#xff08;看上图 索引页和数据页是分开的&#xff09; 2. free链表 用来标识数据区哪些数据页是可用的 3. flush链表 update的时候&#xff0c;如果数据在数据区可以找到&#xff0c;那就直接内…

42. 接雨水(Java)

目录 题目描述:输入&#xff1a;输出&#xff1a;代码实现&#xff1a; 题目描述: 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 输入&#xff1a; height [0,1,0,2,1,0,1,3,2,1,2,1]输出&#xff1…

【PDF-XSS攻击】Java项目-上传文件-解决PDF文件XSS攻击

文章目录 背景解决pdfbox依赖控制器代码PdfUtils工具类 验证最后源码参考 背景 上传xss-pdf造成存储型xss因为在浏览器直接预览的PDF&#xff0c;而不是预览&#xff0c;所以安全部门认为会有XSS漏洞 解决 安全部门修复建议 1、根据白名单的标签和属性对数据进行过滤&#…