请利用HTML DOM实现全选、全不选、反选功能
时间: 2023-07-10 17:34:28 浏览: 157
简单实现全选反选功能(html)
可以使用JavaScript和HTML DOM来实现全选、全不选、反选功能。以下是一个示例代码:
HTML部分:
```
<!DOCTYPE html>
<html>
<head>
<title>全选、全不选、反选</title>
<script src="checkbox.js"></script>
</head>
<body>
<form name="myForm">
<input type="checkbox" name="chk1" value="1">选项1<br>
<input type="checkbox" name="chk2" value="2">选项2<br>
<input type="checkbox" name="chk3" value="3">选项3<br>
<input type="checkbox" name="chk4" value="4">选项4<br>
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="全不选" onclick="uncheckAll()">
<input type="button" value="反选" onclick="reverseCheck()">
</form>
</body>
</html>
```
JavaScript部分:
```
function checkAll() {
var checkboxes = document.getElementsByName("myForm");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = true;
}
}
function uncheckAll() {
var checkboxes = document.getElementsByName("myForm");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = false;
}
}
function reverseCheck() {
var checkboxes = document.getElementsByName("myForm");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = !checkboxes[i].checked;
}
}
```
在以上示例代码中,首先创建了一个包含多个复选框和三个按钮的HTML表单。然后,使用JavaScript编写了三个函数,分别用于实现全选、全不选和反选功能。这些函数使用`getElementsByName()`方法来获取表单中的所有复选框,并使用循环来设置复选框的选中状态。其中,`checkAll()`函数将所有复选框设置为选中状态,`uncheckAll()`函数将所有复选框设置为未选中状态,`reverseCheck()`函数将所有复选框的选中状态取反。最后,将这些函数绑定到HTML表单中的按钮上,当用户单击这些按钮时,就可以实现全选、全不选和反选功能。
阅读全文