javaScript总结全选全不选

最新推荐文章于 2024-09-06 23:41:09 发布

Q53100

最新推荐文章于 2024-09-06 23:41:09 发布

阅读量523

点赞数 1

文章标签： html 前端 java javascript

本文链接：https://blog.csdn.net/Q53100/article/details/127095498

版权

全选：

当鼠标点击全选这个复选框时，调用函数allSelet().使用for循环遍历每一个需要被选中的input元素（我们它们全部放在箱子里面），并给它们的checked属性赋值true。这样就完成了全选。

全不选：

当鼠标点击全选这个复选框时，调用函数noSelet().使用for循环遍历每一个需要被选中的input元素（包括全选那个复选框，所以我们直接从document中获取input），并给它们的checked属性赋值false。这样就完成了全不选。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="checkbox" name="selectAll" id="selectAll" value="" />全选/全不选
		<!--<input type="checkbox" name="selectAll" id="selectReverse" value="" />反选-->
		<p></p>
		<hr />
		<ul class="shop">
			<li><input type="checkbox" name="" id="" value="" />苹果</li>
			<li><input type="checkbox" name="" id="" value="" />梨</li>
			<li><input type="checkbox" name="" id="" value="" />葡萄</li>
			<li><input type="checkbox" name="" id="" value="" />香蕉</li>
			<li><input type="checkbox" name="" id="" value="" />榴莲</li>
		</ul>
		<script type="text/javascript">
//			全选绑定单击事件
			document.getElementById("selectAll").onclick=function(){
//				this:指的是当前触发单击事件的元素
				console.log(this.checked)
//				获取当前全选的选中状态
				var ischeck=this.checked
//				获取到所有的水果的复选框
				var cbs=document.querySelectorAll(".shop input")
//				通过循环来将全选的状态赋值给水果的复选框
				for (var i=0;i<cbs.length;i++) {
					cbs[i].checked=ischeck
				}
			}
		</script>
	</body>
</html>

checked属性是一个布尔属性

checked属性规定在页面加载时应该被预先选定的<input>元素

checked属性适用于<input type="checkbox">和<input type="radio">

checked属性也可以在页面加在后，通过JavaScript代码进行设置
this指的是当前对象

Q53100

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
javaScript总结全选全不选

全不选：当鼠标点击全选这个复选框时，调用函数noSelet().使用for循环遍历每一个需要被选中的input元素（包括全选那个复选框，所以我们直接从document中获取input），并给它们的checked属性赋值false。这样就完成了全不选。全选：当鼠标点击全选这个复选框时，调用函数allSelet().使用for循环遍历每一个需要被选中的input元素（我们它们全部放在箱子里面），并给它们的checked属性赋值true。checked属性规定在页面加载时应该被预先选定的元素。
复制链接

扫一扫