jquery checkgroup 一个checkbox的check逻辑封装
时间: 2023-08-19 09:04:09 浏览: 37
可以使用以下代码来封装一个单独 checkbox 的 check 逻辑:
```javascript
function checkSingle(checkboxName, checkAllCheckboxName) {
// 获取单独的 checkbox
var checkbox = document.getElementsByName(checkboxName)[0];
// 获取全选 checkbox
var checkAllCheckbox = document.getElementsByName(checkAllCheckboxName)[0];
// 如果单独的 checkbox 选中了,则检查全选 checkbox 是否需要选中
if (checkbox.checked) {
var allChecked = true;
var checkboxes = document.getElementsByName(checkbox.name);
for (var i = 0; i < checkboxes.length; i++) {
if (!checkboxes[i].checked) {
allChecked = false;
break;
}
}
checkAllCheckbox.checked = allChecked;
}
// 如果单独的 checkbox 取消选中了,则取消全选 checkbox
else {
checkAllCheckbox.checked = false;
}
}
```
使用时,在单独的 checkbox 的 `onchange` 事件中调用该函数即可:
```html
<input type="checkbox" name="group1" onchange="checkSingle('group1', 'checkAll')">
<input type="checkbox" name="group2" onchange="checkSingle('group2', 'checkAll')">
<input type="checkbox" name="group3" onchange="checkSingle('group3', 'checkAll')">
<input type="checkbox" name="checkAll" onchange="checkAll('group1', 'group2', 'group3', 'checkAll')">
```
其中,`checkboxName` 参数为单独 checkbox 的 name 属性值,`checkAllCheckboxName` 参数为全选 checkbox 的 name 属性值。在单独的 checkbox 的 `onchange` 事件中,传入对应的参数即可。