JS 实现全选效果、二级菜单、选项卡

最新推荐文章于 2023-10-01 22:23:33 发布

VIP文章让我打个盹

最新推荐文章于 2023-10-01 22:23:33 发布

阅读量564

点赞数 4

本文链接：https://blog.csdn.net/weixin_48494427/article/details/124993423

版权

全选效果：

二级菜单：

选项卡：

全选效果：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<h2>你最喜欢的水果</h2>
		<input type="checkbox" id="all" />
		<label for="all">全选</label>
		<button id="reverse">反选</button>
		<p>
			<input type="checkbox" id="box1" class="fruit" />
			<label for="box1">香蕉</label>
			<input type="checkbox" id="box2" class="fruit" />
			<label for="box2">橘子</label>
			<input type="checkbox" id="box3" class="fruit" />
			<label for="box3">苹果</label>
		</p>
	</body>
	<script>
		var all = document.getElementById("all")
		var rev = document.getElementById("reverse");
		var fruit = document.querySelectorAll(".fruit");
		// 第一种 全选/全不选
		/*all.onclick = function () {
		  var t = all.checked;
		  if (t === true) {
		    for (var i = 0; i < fruit.length; i++) {
		      fruit[i].checke

最低0.47元/天解锁文章

让我打个盹

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS 实现全选效果、二级菜单、选项卡

目录全选效果：二级菜单：选项卡：全选效果：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-
复制链接

扫一扫