功能：
a:实现点击复选框的时候全选所有的子复选框，再点击取消所有复选框的选中状态
b:有一个子复选框选中则父复选框选中 所有子复选框都不选中则父复选框不选中
代码如下:/** * 全选函数 * @param mainId 主复选框id * @param klass 下属复选框的class */function selectAll(mainId,klass){ $(“.” + klass).each(function(){ if($(“#” + mainId).attr(“checked”)== “checked”){ $(this).attr(“checked”, “ch
### jQuery复选框全选/取消示例
#### 功能概述
本文档旨在介绍如何使用jQuery来实现复选框的全选与取消全选功能。具体功能包括：
1. **全选子复选框**：当点击主复选框时，能够自动全选或取消所有下属复选框。
2. **父复选框状态更新**：根据子复选框的状态（是否被选中），动态更新父复选框的状态。
#### 代码解析
##### 全选函数 `selectAll`
此函数用于处理主复选框被点击时的行为，包括全选所有下属复选框以及取消所有下属复选框的选择状态。
```javascript
/**
* 全选函数
* @param mainId 主复选框id
* @param klass 下属复选框的class
*/
function selectAll(mainId, klass) {
$('.' + klass).each(function() {
if ($('#' + mainId).attr('checked') === 'checked') {
$(this).attr('checked', 'checked');
} else {
$(this).removeAttr('checked');
}
});
}
```
- **参数解释**：
- `mainId`：指定主复选框的ID。
- `klass`：下属复选框的CSS类名。
- **功能逻辑**：
- 遍历所有具有指定类名`klass`的元素。
- 检查主复选框是否被选中。
- 如果是，则将当前遍历到的下属复选框设置为选中状态。
- 如果不是，则移除下属复选框的选中状态。
##### 子复选框状态更新函数 `checkSonCheckBox`
该函数负责处理单个子复选框被点击时的行为，并根据子复选框的状态更新父复选框的状态。
```javascript
/**
* 子复选框有一个选中 父复选框就选中 <br>
* 子复选框全不选 父复选框不选中
* @param father 父复选框的id
* @param son 子复选框的class
*/
function checkSonCheckBox(father, son) {
$('.' + son).click(function() {
if ($(this).attr('checked') === 'checked') {
$(this).addClass('checked');
} else {
$(this).removeClass('checked');
}
if ($('.' + son).hasClass('checked')) {
$('#' + father).attr('checked', 'checked');
console.log('至少有一个子复选框选中！');
} else {
$('#' + father).removeAttr('checked');
console.log('所有子复选框都未选中！');
}
});
};
```
- **参数解释**：
- `father`：父复选框的ID。
- `son`：子复选框的CSS类名。
- **功能逻辑**：
- 当一个子复选框被点击时，首先检查其是否被选中。
- 如果被选中，则添加`checked`类。
- 如果未被选中，则移除`checked`类。
- 接着，检查是否存在任何具有`checked`类的子复选框。
- 如果存在，则选中父复选框并输出提示信息。
- 如果不存在，则取消父复选框的选中状态并输出提示信息。
#### 总结
通过上述两个函数的实现，我们可以有效地控制复选框的全选与取消全选行为，并且可以根据子复选框的状态自动更新父复选框的状态。这种机制非常适合于表格或者列表中涉及到多级选择的场景。例如，在电商平台的商品管理页面中，可以方便地实现批量操作（如批量删除、批量修改状态等）。此外，通过jQuery的强大功能，这些操作不仅简洁而且易于维护。
