首页请利用HTML DOM实现全选、全不选和反选功能。

请利用HTML DOM实现全选、全不选和反选功能。

时间: 2024-05-05 19:21:13 浏览: 76

全选反选复选框/全选按钮和按钮之间关系的实现

以下是一个简单的实现示例： ```html <!DOCTYPE html> <html> <head> <title>DOM全选、全不选和反选示例</title> <script> function selectAll() { var checkboxes = document.getElementsByName("option"); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = true; } } function unselectAll() { var checkboxes = document.getElementsByName("option"); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = false; } } function toggleSelection() { var checkboxes = document.getElementsByName("option"); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = !checkboxes[i].checked; } } </script> </head> <body> <h1>DOM全选、全不选和反选示例</h1> <form> <input type="checkbox" name="option" value="1">选项1<br> <input type="checkbox" name="option" value="2">选项2<br> <input type="checkbox" name="option" value="3">选项3<br> <input type="checkbox" name="option" value="4">选项4<br> </form> <br> <button onclick="selectAll()">全选</button> <button onclick="unselectAll()">全不选</button> <button onclick="toggleSelection()">反选</button> </body> </html> ``` 在这个示例中，我们使用了 `document.getElementsByName()` 方法来获取所有名字为 "option" 的复选框元素，并使用 for 循环来遍历它们。在 `selectAll()` 函数中，我们将每个复选框的 `checked` 属性设置为 `true`，从而选中它们。在 `unselectAll()` 函数中，我们将每个复选框的 `checked` 属性设置为 `false`，从而取消选中它们。在 `toggleSelection()` 函数中，我们将每个复选框的 `checked` 属性取反，从而将选中的取消选中，将未选中的选中。最后，我们在页面上添加了三个按钮来触发这些函数。

阅读全文