【无标题】JavaScript全选按钮

最新推荐文章于 2024-10-02 05:39:15 发布

A_123_123_123

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量88

点赞数 2

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/A_123_123_123/article/details/140672637

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 100px;
				padding: 20px;
				border: 1px solid pink;
				margin: 30px auto;
				border-radius: 5px;
			}
			hr{
				margin: 10px 0;
			}
		</style>
	</head>
	<body>
		<!-- 确认需求：
		1.全选按钮点击的时候，根据自身状态决定所有选项按钮状态
		2.点击每一个选项按钮的时候，根据所有选项按钮状态决定全选按钮状态
		
		布局结构：
		1.需要一个 全选按钮 和若干的 选项按钮 标签 -->
		
		<div class="box">
			全选 ：<input type="checkbox"> <br>
			<hr>
			<input type="checkbox">选项一<br>
			<input type="checkbox">选项二<br>
			<input type="checkbox">选项三<br/>
			<input type="checkbox">选项四<br>
		</div>
		<script>
			// 代码逻辑 ：
			// 1.给 全选按钮 绑定点击事件
			//   -拿到自己的选中状态
			//   -给所有选项按钮设置选中状态
			// 2.给 每一个选项按钮绑定点击事件
			//   -判断是不是所有选项按钮都是选中的
			//   -根据判断结果给全选按钮设置选中状态
			
			// 1.获取元素
			var allBtn = document.querySelector('input')
			var items = document.querySelectorAll('input:nth-child(n + 2)')
			
			//12.给全选按钮绑定事件
			allBtn.onclick = function (){
				// 2-1.拿到自己的选中状态
				var type = allBtn.checked
				
				//2-2.把自己的选中状态设置给每一个选项按钮
				for (var i = 0; i < items.length; i++) {
					items[i].checked = type
				}
			}
			// 3.循环给每一个选项按钮绑定点击事件
			for (var i = 0; i < items.length; i++){
				//3-1.给每一个选项按钮绑定点击事件
				items[i].onclick = function (){
					//3-2.首先定义假设变量，假设所有按钮都是选中的
					var flag = true
						
					//3-3.通过循环来验证我们的假设
					for(var j=0;j< items.length;j++){
						if(items[j].checked === false){
							flag= false
							break
						}
					}
					// 3-4.把我们得到的结果设置给全选按钮
					allBtn.checked = flag
				}
			}
		</script>
	</body>
</html>

</body>
</html>