在表单交互开发中，复选框联动是高频需求，尤其是包含主选框与多个子选框的复杂场景，需要保证主选框和子选框的状态实时同步，避免出现状态不一致的问题。合理的状态管理策略能减少逻辑漏洞，提升用户操作体验。
核心逻辑梳理
复杂复选框联动的核心逻辑分为两部分，一是主选框状态变化时，同步所有子选框的状态；二是子选框状态变化时，根据子选框的选中情况反向更新主选框的状态。具体规则如下：
- 主选框选中时，所有子选框自动选中
- 主选框取消选中时，所有子选框自动取消选中
- 所有子选框都选中时，主选框自动选中
- 任意一个子选框取消选中时，主选框自动取消选中
HTML结构准备
首先搭建基础的复选框结构，主选框添加id="mainCheckbox"，子选框统一添加class="subCheckbox"，方便后续通过jQuery选择器批量操作：
<div class="checkbox-group">
<div class="main-check">
<input type="checkbox" id="mainCheckbox">
<label for="mainCheckbox">全选/全取消</label>
</div>
<div class="sub-check-list">
<div class="sub-item">
<input type="checkbox" class="subCheckbox" value="1">
<label>选项一</label>
</div>
<div class="sub-item">
<input type="checkbox" class="subCheckbox" value="2">
<label>选项二</label>
</div>
<div class="sub-item">
<input type="checkbox" class="subCheckbox" value="3">
<label>选项三</label>
</div>
<div class="sub-item">
<input type="checkbox" class="subCheckbox" value="4">
<label>选项四</label>
</div>
</div>
</div>jQuery实现逻辑
主选框事件绑定
给主选框绑定change事件，当主选框状态变化时，获取当前选中状态，同步设置所有子选框的选中状态：
// 主选框状态变化事件
$('#mainCheckbox').on('change', function() {
// 获取主选框当前选中状态
var isMainChecked = $(this).prop('checked');
// 同步所有子选框的选中状态
$('.subCheckbox').prop('checked', isMainChecked);
});子选框事件绑定
给所有子选框绑定change事件，每次子选框状态变化后，统计当前选中的子选框数量，和子选框总数量对比，更新主选框的状态：
// 子选框状态变化事件
$('.subCheckbox').on('change', function() {
// 获取子选框总数量
var totalSubCount = $('.subCheckbox').length;
// 获取当前选中的子选框数量
var checkedSubCount = $('.subCheckbox:checked').length;
// 根据数量对比更新主选框状态
if (checkedSubCount === totalSubCount) {
// 所有子选框都选中，主选框选中
$('#mainCheckbox').prop('checked', true);
} else {
// 存在未选中的子选框，主选框取消选中
$('#mainCheckbox').prop('checked', false);
}
});边界情况处理
实际开发中还需要考虑一些边界场景，比如动态新增子选框、子选框被禁用的情况，需要对逻辑做补充：
- 动态新增子选框时，需要重新绑定
change事件，或者使用事件委托的方式绑定，避免新增的子选框无法触发状态同步逻辑 - 如果存在禁用的子选框，统计子选框总数量和选中数量时，需要排除禁用项，避免禁用项影响主选框的状态判断
使用事件委托处理动态子选框的示例代码如下：
// 事件委托绑定子选框变化事件，支持动态新增的子选框
$('.sub-check-list').on('change', '.subCheckbox', function() {
var totalSubCount = $('.subCheckbox').length;
var checkedSubCount = $('.subCheckbox:checked').length;
$('#mainCheckbox').prop('checked', checkedSubCount === totalSubCount);
});完整示例代码
整合所有逻辑后的完整可运行代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery复选框联动示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="checkbox-group">
<div class="main-check">
<input type="checkbox" id="mainCheckbox">
<label for="mainCheckbox">全选/全取消</label>
</div>
<div class="sub-check-list">
<div class="sub-item">
<input type="checkbox" class="subCheckbox" value="1">
<label>选项一</label>
</div>
<div class="sub-item">
<input type="checkbox" class="subCheckbox" value="2">
<label>选项二</label>
</div>
<div class="sub-item">
<input type="checkbox" class="subCheckbox" value="3">
<label>选项三</label>
</div>
<div class="sub-item">
<input type="checkbox" class="subCheckbox" value="4">
<label>选项四</label>
</div>
</div>
</div>
<script>
$(function() {
// 主选框事件
$('#mainCheckbox').on('change', function() {
var isMainChecked = $(this).prop('checked');
$('.subCheckbox').prop('checked', isMainChecked);
});
// 子选框事件委托，支持动态新增
$('.sub-check-list').on('change', '.subCheckbox', function() {
var totalSubCount = $('.subCheckbox').length;
var checkedSubCount = $('.subCheckbox:checked').length;
$('#mainCheckbox').prop('checked', checkedSubCount === totalSubCount);
});
});
</script>
</body>
</html>