html复选框全选按钮
时间: 2023-07-01 16:14:41 浏览: 56
您可以使用以下代码来实现 HTML 复选框全选按钮:
```html
<input type="checkbox" id="selectAll" onclick="selectAllCheckboxes()"> 全选
<br>
<input type="checkbox" class="checkbox" name="fruit[]" value="apple">苹果
<input type="checkbox" class="checkbox" name="fruit[]" value="banana">香蕉
<input type="checkbox" class="checkbox" name="fruit[]" value="orange">橙子
<script>
function selectAllCheckboxes() {
var checkboxes = document.getElementsByClassName('checkbox');
for (var i=0; i<checkboxes.length; i++) {
checkboxes[i].checked = document.getElementById('selectAll').checked;
}
}
</script>
```
以上代码中,我们添加了一个 id 为 "selectAll" 的复选框,用于全选和全不选其他复选框。当单击该复选框时,我们调用名为 "selectAllCheckboxes" 的 JavaScript 函数来设置所有复选框的选中状态。该函数首先获取所有 class 为 "checkbox" 的复选框元素,并使用一个循环来设置它们的选中状态。