用jquery写一个全选反选功能
时间: 2023-09-02 21:14:47 浏览: 93
可以使用以下代码实现全选反选功能:
HTML代码:
```
<input type="checkbox" id="checkAll"> 全选
<br>
<input type="checkbox" class="check"> 选项1
<br>
<input type="checkbox" class="check"> 选项2
<br>
<input type="checkbox" class="check"> 选项3
```
jQuery代码:
```
$(document).ready(function() {
// 全选
$("#checkAll").click(function() {
$(".check").prop("checked", $(this).prop("checked"));
});
// 反选
$(".check").click(function() {
if ($(".check:checked").length == $(".check").length) {
$("#checkAll").prop("checked", true);
} else {
$("#checkAll").prop("checked", false);
}
});
});
```
上述代码中,首先通过`$("#checkAll")`选中全选的复选框,通过`.check`选中需要被全选/反选的复选框。
然后,通过点击事件监听全选复选框的变化,当全选复选框被勾选时,将所有需要被全选/反选的复选框的`checked`属性设置为全选复选框的状态。
接着,通过点击事件监听每个需要被全选/反选的复选框的变化,当所有需要被全选/反选的复选框都被勾选时,将全选复选框设置为勾选状态,否则设置为不勾选状态。
阅读全文