首页html里如何让全选按钮反选

html里如何让全选按钮反选

时间: 2023-07-05 09:20:30 浏览: 151

在HTML中，反选指的是将已选中的选项取消选择，未选中的选项选中。要实现这个功能，可以使用JavaScript编写一个函数来处理。以下是实现反选功能的示例代码： ```html <!DOCTYPE html> <html> <head> <title>反选示例</title> </head> <body> <p>请选择以下选项：</p> <input type="checkbox" id="option1" name="option1" value="1"> <label for="option1">选项1</label><br> <input type="checkbox" id="option2" name="option2" value="2"> <label for="option2">选项2</label><br> <input type="checkbox" id="option3" name="option3" value="3"> <label for="option3">选项3</label><br> <input type="checkbox" id="selectAll" name="selectAll" onclick="toggleCheckboxes()"> <label for="selectAll">全选/反选</label><br> <script> function toggleCheckboxes() { var checkboxes = document.querySelectorAll('input[type="checkbox"]'); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = !checkboxes[i].checked; } } </script> </body> </html> ``` 在这个示例中，我们首先创建了三个复选框和一个全选/反选复选框。当点击全选/反选复选框时，会调用名为`toggleCheckboxes()`的函数。这个函数会获取所有类型为`checkbox`的复选框，并将它们的`checked`属性设置为相反的值，以实现反选的效果。最后，我们将这个函数绑定到全选/反选复选框的`onclick`事件上，以便在点击时触发。

阅读全文