使用jquery实现总复选框选中时,单个复选框全被选中,当全部单个复选框被选中时,总复选框被选中,有一个复选框未被选中时,总复选框不选中
时间: 2023-10-15 07:08:30 浏览: 149
jquery判断复选框是否被全部选中,达到全选的目的
可以使用以下代码实现:
```javascript
$(function(){
// 点击总复选框
$("#checkAll").click(function(){
// 判断总复选框是否选中
if($(this).prop("checked")){
// 选中时,将所有单个复选框选中
$("input[type='checkbox']").prop("checked", true);
}else{
// 不选中时,将所有单个复选框取消选中
$("input[type='checkbox']").prop("checked", false);
}
});
// 点击单个复选框
$("input[type='checkbox']").click(function(){
var flag = true;
// 判断所有单个复选框是否全部选中
$("input[type='checkbox']").each(function(){
if(!$(this).prop("checked")){
flag = false;
return false; // 跳出循环
}
});
// 如果全部选中,则选中总复选框,否则不选中
if(flag){
$("#checkAll").prop("checked", true);
}else{
$("#checkAll").prop("checked", false);
}
});
});
```
其中,`#checkAll`是总复选框的id,`input[type='checkbox']`是单个复选框的选择器。当总复选框被选中时,使用`prop()`方法将所有单个复选框选中;当总复选框取消选中时,使用`prop()`方法将所有单个复选框取消选中。当单个复选框被点击时,使用`each()`方法遍历所有单个复选框,判断是否全部选中,如果全部选中,则选中总复选框,否则不选中。
阅读全文