首页实现全选checkbox效果

实现全选checkbox效果

时间: 2023-10-07 22:04:08 浏览: 89

要实现全选checkbox的效果，你可以使用JavaScript来操作DOM元素。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <script> function toggle(source) { var checkboxes = document.querySelectorAll('input[type="checkbox"]'); for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i] !== source) checkboxes[i].checked = source.checked; } } </script> </head> <body> <label><input type="checkbox" onclick="toggle(this);">全选</label> <br> <label><input type="checkbox">选项1</label> <br> <label><input type="checkbox">选项2</label> <br> <label><input type="checkbox">选项3</label> </body> </html> ``` 这段代码中，我们首先给全选的复选框绑定了一个`onclick`事件处理函数`toggle()`。当点击全选复选框时，该函数会被调用。函数内部，我们使用`document.querySelectorAll('input[type="checkbox"]')`获取到所有类型为checkbox的input元素，并将其保存在`checkboxes`变量中。然后，我们使用一个循环遍历所有的复选框，并将它们的`checked`属性设置为与全选复选框相同的值，但排除了全选复选框本身。这样，当点击全选复选框时，其他所有复选框的状态都会与全选复选框保持一致，实现了全选的效果。

阅读全文