jquery checkgroup 一组checkbox的check逻辑封装
时间: 2023-08-18 14:08:06 浏览: 44
可以使用以下代码来封装一组 checkbox 的 check 逻辑:
```javascript
function checkGroup(checkboxName, checkAllCheckboxName) {
// 获取所有同名的 checkbox
var checkboxes = $("input[name='" + checkboxName + "']");
// 获取全选 checkbox
var checkAllCheckbox = $("input[name='" + checkAllCheckboxName + "']");
// 遍历所有 checkbox,如果有一个未选中,则取消全选
var allChecked = true;
checkboxes.each(function() {
if (!$(this).prop("checked")) {
allChecked = false;
return false;
}
});
checkAllCheckbox.prop("checked", allChecked);
}
```
使用时,只需要在每个 checkbox 的 `change` 事件中调用该函数即可:
```html
<input type="checkbox" name="group" class="check-group" >
<input type="checkbox" name="group" class="check-group" >
<input type="checkbox" name="group" class="check-group" >
<input type="checkbox" name="group" class="check-group" >
<input type="checkbox" name="checkAll" class="check-all" >
<script>
// 绑定 change 事件
$(".check-group, .check-all").change(function() {
checkGroup("group", "checkAll");
});
</script>
```
其中,`checkboxName` 参数为一组 checkbox 的 name 属性值,`checkAllCheckboxName` 参数为全选 checkbox 的 name 属性值。在每个 checkbox 的 `change` 事件中,调用该函数即可。同时,为了方便,可以使用 jQuery 来获取 checkbox,并且使用 `prop` 方法来获取和设置 checkbox 的状态。