JavaScript实现页面一键全选或反选

一只笨菜鸟

已于 2023-04-06 12:49:06 修改

阅读量793

点赞数

分类专栏：有趣的前端文章标签： javascript html

于 2021-11-11 20:08:36 首次发布

本文链接：https://blog.csdn.net/m0_48660016/article/details/121275090

版权

有趣的前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.hobby {
				width: 600px;
				height: 50px;
				background-color: #5F9EA0;
				line-height: 50px;
			}

			.but {
				float: right;
				margin-right: 10px;
			}
		</style>
	</head>
	<body>
		<div class="hobby">
			<!-- 创建多选框 -->
			<input type="checkbox" checked="true" name="hobby" id="" value="羽毛球" />羽毛球
			<input type="checkbox" name="hobby" id="" value="赛车" />赛车
			<input type="checkbox" name="hobby" id="" value="听音乐" />听音乐
			<input type="checkbox" name="hobby" id="" value="看杂志" />看杂志
			<!-- 选择按钮 -->
			<div class="but">
				<button type="button" onclick="selectAll(this)">全选</button>
				<button type="button" onclick="selectAllOut()">全不选</button>
			</div>
		</div>

		<script type="text/javascript">
			// 全选方法
			function selectAll(obj) {
				var a = document.getElementsByName("hobby");
				for (var i = 0; i < a.length; i++) {
					a[i].checked = "true";
					console.log(a[i].value)
				}
			};
			// 全部取消方法
			function selectAllOut() {
				var a = document.getElementsByName("hobby");
				for (var i = 0; i < a.length; i++)
					a[i].checked = "";
			}
		</script>
	</body>
</html>

一只笨菜鸟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现页面一键全选或反选

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .hobby { width: 600px; height: 50px; background-color: #5F9EA0; line-height: 50px; } .b.
复制链接

扫一扫