html5全选和取消全选
时间: 2024-01-09 13:05:00 浏览: 33
在HTML5中,可以使用JavaScript来实现全选和取消全选的功能。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<script>
function selectAll() {
var checkboxes = document.getElementsByName('checkbox');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = true;
}
}
function deselectAll() {
var checkboxes = document.getElementsByName('checkbox');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = false;
}
}
</script>
</head>
<body>
<input type="checkbox" name="checkbox">选项1<br>
<input type="checkbox" name="checkbox">选项2<br>
<input type="checkbox" name="checkbox">选项3<br>
<button onclick="selectAll()">全选</button>
<button onclick="deselectAll()">取消全选</button>
</body>
</html>
```
这段代码中,我们使用了`getElementsByName`函数来获取所有名为"checkbox"的复选框元素。在`selectAll`函数中,我们将所有复选框的`checked`属性设置为`true`,以实现全选功能。在`deselectAll`函数中,我们将所有复选框的`checked`属性设置为`false`,以实现取消全选功能。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)