【网站全选和单选】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-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>