jquery复选框全选和反选
时间: 2023-11-28 17:46:14 浏览: 38
以下是jQuery实现复选框全选和反选的代码示例:
1. 全选
```javascript
//全选按钮
$("#checkedAllBtn").click(function(){
//所有复选框的状态都变成选中状态
items.prop("checked",true);
//全选/全部选复选框的状态也变成选中状态
$("#checkedAllBox").prop("checked",true);
});
```
2. 反选
```javascript
//反选按钮
$("#checkedRevBtn").click(function(){
//遍历所有复选框
items.each(function(){
//将每个复选框的选中状态取反
$(this).prop("checked",!$(this).prop("checked"));
});
//更新全选/全部选复选框的状态
$("#checkedAllBox").prop("checked",items.length == items.filter(":checked").length);
});
```
相关问题
jquery实现全选和反选
可以使用以下代码实现全选和反选的功能:
```javascript
// 全选
$("#checkAll").click(function(){
$("input[type='checkbox']").prop("checked", true);
});
// 反选
$("#checkReverse").click(function(){
$("input[type='checkbox']").each(function(){
$(this).prop("checked", !$(this).prop("checked"));
});
});
```
其中,`#checkAll` 和 `#checkReverse` 分别为全选和反选的按钮的 ID,`$("input[type='checkbox']")` 选择所有类型为 checkbox 的 input 元素。在全选的事件处理函数中,将所有的复选框的 checked 属性设置为 true,在反选的事件处理函数中,将每个复选框的 checked 属性取反即可。
用jquery写一个全选反选功能
可以使用以下代码实现全选反选功能:
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`属性设置为全选复选框的状态。
接着,通过点击事件监听每个需要被全选/反选的复选框的变化,当所有需要被全选/反选的复选框都被勾选时,将全选复选框设置为勾选状态,否则设置为不勾选状态。