jquery checkbox 全选
时间: 2023-11-20 08:58:18 浏览: 40
以下是一个jQuery实现的checkbox全选功能的例子:
```javascript
// HTML代码
<input type="checkbox" id="checkAll">全选
<input type="checkbox" class="subCheck">选项1
<input type="checkbox" class="subCheck">选项2
<input type="checkbox" class="subCheck">选项3
// jQuery代码
$(function(){
// 全选
$("#checkAll").click(function(){
$(".subCheck").prop("checked", this.checked);
});
// 子选项
$(".subCheck").click(function(){
var flag = true;
$(".subCheck").each(function(){
if(!this.checked){
flag = false;
}
});
$("#checkAll").prop("checked", flag);
});
});
```
相关问题
jquery checkbox全选全不选
jQuery可以通过以下代码实现checkbox的全选和全不选功能:
全选:
```javascript
$("#checkAll").click(function(){
$("input[type='checkbox']").prop("checked",true);
});
```
其中,`#checkAll`是全选的复选框的ID,`$("input[type='checkbox']")`选中所有的复选框,`.prop("checked",true)`将它们的checked属性设置为true,即选中状态。
全不选:
```javascript
$("#unCheckAll").click(function(){
$("input[type='checkbox']").prop("checked",false);
});
```
其中,`#unCheckAll`是全不选的复选框的ID,`$("input[type='checkbox']")`选中所有的复选框,`.prop("checked",false)`将它们的checked属性设置为false,即未选中状态。
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 属性取反即可。