html复选框全选
时间: 2023-07-01 16:25:53 浏览: 121
HTML复选框
可以通过 JavaScript 来实现 HTML 复选框的全选功能。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>复选框全选示例</title>
</head>
<body>
<form>
<input type="checkbox" id="checkAll">全选<br>
<input type="checkbox" name="fruit" value="apple">苹果<br>
<input type="checkbox" name="fruit" value="banana">香蕉<br>
<input type="checkbox" name="fruit" value="orange">橙子<br>
</form>
<script>
const checkAll = document.getElementById("checkAll");
const fruitCheckboxes = document.getElementsByName("fruit");
checkAll.addEventListener("click", function() {
for (let i = 0; i < fruitCheckboxes.length; i++) {
fruitCheckboxes[i].checked = checkAll.checked;
}
});
</script>
</body>
</html>
```
在这个示例中,我们首先定义了一个全选复选框和三个水果复选框。然后,我们通过使用 `document.getElementById()` 和 `document.getElementsByName()` 方法获取这些元素的引用。我们添加了一个点击事件监听器,当全选复选框被选中时,我们遍历所有的水果复选框,并将它们的 `checked` 属性设置为全选复选框的状态。这样就可以实现复选框的全选功能了。
阅读全文