<!DOCTYPE html>
<html>
<head>
<title>全选示例</title>
<script>
// 当点击全选复选框时调用，将所有选项的状态设置为与全选复选框相同的值
function checkAll() {
var checkboxes = document.getElementsByName('checkbox');
var checkAllCheckbox = document.getElementById('checkAll');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = checkAllCheckbox.checked;
}
}
// 当单独的复选框被点击时调用，遍历所有复选框并更新全选框的状态
function checkSingle() {
var checkboxes = document.getElementsByName('checkbox');
var checkAllCheckbox = document.getElementById('checkAll');
var allChecked = true;
for (var i = 0; i < checkboxes.length; i++) {
if (!checkboxes[i].checked) {
allChecked = false;
break;
}
}
checkAllCheckbox.checked = allChecked;
}
</script>
</head>
<body>
<h2>全选示例</h2>
<input type="checkbox" id="checkAll" onclick="checkAll()">全选
<br>
<input type="checkbox" name="checkbox" onclick="checkSingle()">选项1
<input type="checkbox" name="checkbox" onclick="checkSingle()">选项2
<input type="checkbox" name="checkbox" onclick="checkSingle()">选项3
</body>
</html>
扫一扫
07-30
418
418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
