html 实现复选框 全选
时间: 2023-12-23 10:46:55 浏览: 29
以下是一个使用HTML实现复选框全选功能的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Checkbox全选示例</title>
<script>
function checkAll(checkboxName, isChecked) {
var checkboxes = document.getElementsByName(checkboxName);
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = isChecked;
}
}
</script>
</head>
<body>
<h3>选择您喜欢的水果:</h3>
<label><input type="checkbox" name="fruit" value="apple">苹果</label><br>
<label><input type="checkbox" name="fruit" value="banana">香蕉</label><br>
<label><input type="checkbox" name="fruit" value="orange">橙子</label><br>
<label><input type="checkbox" name="fruit" value="grape">葡萄</label><br>
<br>
<button onclick="checkAll('fruit', true)">全选</button>
<button onclick="checkAll('fruit', false)">取消全选</button>
</body>
</html>
```
在这个示例中,我们定义了一个名为“fruit”的复选框组,然后使用JavaScript中的“getElementsByName”函数获取该组的所有复选框,并将它们的选中状态设置为“isChecked”,以实现全选或取消全选的功能。这个函数被两个按钮调用,一个用于全选,一个用于取消全选。