【网站全选和单选】js 实现-点击全选按钮时，所有的按钮都会被选中或取消选中。

news2024/11/16 8:54:38

要实现的效果如图：

在这里插入图片描述

代码实现：

<!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></title>
	</head>
	<style>
		div {
			margin: 100px auto;
			width: 900px;
		}
	</style>
	<body>
		<input type="checkbox" id="selectAll" /> 全选
		<br />
		<input type="checkbox" class="checkbox" /> 选项1
		<br />
		<input type="checkbox" class="checkbox" /> 选项2
		<br />
		<input type="checkbox" class="checkbox" /> 选项3
	</body>
	
	<script>
		// 获取全选按钮和所有的按钮
		var selectAll = document.getElementById("selectAll");
		var checkboxes = document.getElementsByClassName("checkbox");
		
		// 当任意一个按钮状态发生改变时，检查是否所有按钮都被选中
		for (var i = 0; i < checkboxes.length; i++) {
		  checkboxes[i].addEventListener("change", function() {
		    var allChecked = true;
		    for (var j = 0; j < checkboxes.length; j++) {
		      if (!checkboxes[j].checked) {
		        allChecked = false;
		        break;
		      }
		    }
		    // 根据所有按钮的选中状态来改变全选按钮的选中状态
		    selectAll.checked = allChecked;
		  });
		}
	
		// 当点击全选按钮时，将所有按钮的选中状态与全选按钮的选中状态保持一致
		selectAll.addEventListener("change", function() {
		  for (var i = 0; i < checkboxes.length; i++) {
		    checkboxes[i].checked = selectAll.checked;
		  }
		});
	</script>
</html>