首页html checkbox全选中代码

html checkbox全选中代码

时间: 2023-10-27 16:07:28 浏览: 78

以下是一个简单的 HTML 多选框全选中的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Checkbox 全选中示例</title> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function() { $("#checkAll").click(function() { $('input:checkbox').not(this).prop('checked', this.checked); }); }); </script> </head> <body> <h2>Checkbox 全选中示例</h2> <p><input type="checkbox" id="checkAll"> 全选</p> <p><input type="checkbox" name="fruit" value="apple"> 苹果</p> <p><input type="checkbox" name="fruit" value="banana"> 香蕉</p> <p><input type="checkbox" name="fruit" value="orange"> 橙子</p> <p><input type="checkbox" name="fruit" value="grape"> 葡萄</p> </body> </html> ``` 这段代码使用了 jQuery 库，可以在点击全选框时，通过 `prop` 方法将所有复选框的选中状态设置为与全选框相同。

阅读全文