首页html复选框全选和取消全选

html复选框全选和取消全选

时间: 2023-12-23 18:52:59 浏览: 226

你可以使用JavaScript来实现全选和取消全选的功能。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>Checkbox全选/取消全选</title> <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><br> <label><input type="checkbox" name="fruit[]" value="apple">苹果</label><br> <label><input type="checkbox" name="fruit[]" value="banana">香蕉</label><br> <label><input type="checkbox" name="fruit[]" value="orange">橙子</label><br> <label><input type="checkbox" name="fruit[]" value="pear">梨子</label><br> </body> </html> ``` 在这个示例代码中，我们定义了一个 `toggle()` 函数，它将被传递一个参数，即全选/取消全选的复选框。在 `toggle()` 函数中，我们使用 `querySelectorAll()` 方法选择所有的复选框，并将它们的状态设置为与全选/取消全选的复选框相同。请注意，我们使用 `!=` 运算符来确保我们不会更改全选/取消全选的复选框的状态。在 HTML 中，我们创建了一个名为 `fruit[]` 的复选框组。我们还创建了一个名为“全选/取消全选”的复选框，并将其与 `toggle()` 函数关联，以便在单击它时触发函数。

阅读全文