复选框联动是表单交互里的常见需求，比如全选框控制所有子复选框的选中状态，子复选框全部取消时全选框同步取消选中，这类功能用jQuery实现时很容易出现各种失效情况，下面我们就来逐一分析问题和解决方法。
常见失效场景及原因
1. 事件绑定时机错误
如果复选框是通过动态生成的，直接在页面加载完成后用click()或者change()绑定事件，动态生成的元素不会触发绑定的事件，导致联动失效。
2. 用attr方法操作checked属性
jQuery的attr()方法操作的是元素的初始属性，而checked是布尔类型的动态属性，用attr('checked', true)设置后，有时候无法正确同步DOM的选中状态，就会出现点击全选框子复选框没反应的问题。
3. 子复选框状态判断逻辑错误
判断子复选框是否全部选中时，如果用了错误的选择器或者判断条件，比如只判断第一个子复选框的状态，就会导致全选框状态更新逻辑出错。
正确的实现方案
1. 事件绑定用on委托
对于静态或者动态生成的复选框，都用on()方法委托事件，确保不管是初始存在的还是后续添加的复选框都能触发事件。
2. 用prop方法操作checked属性
prop()方法操作的是元素当前的动态属性，设置checked属性时用prop('checked', true/false)，可以正确同步选中状态。
3. 全选联动子复选框实现
下面是全选框点击后控制所有子复选框的完整代码：
// 等待DOM加载完成
$(function() {
// 全选框change事件，用on委托绑定，兼容动态生成的复选框
$(document).on('change', '#checkAll', function() {
// 获取全选框当前的选中状态
var isChecked = $(this).prop('checked');
// 设置所有子复选框的选中状态和全选框一致
$('.child-check').prop('checked', isChecked);
});
});4. 子复选框联动全选框实现
子复选框状态变化时，判断所有子复选框是否全部选中，同步更新全选框状态：
$(function() {
// 子复选框change事件，委托绑定
$(document).on('change', '.child-check', function() {
// 获取所有子复选框
var $allChild = $('.child-check');
// 获取选中的子复选框
var $checkedChild = $('.child-check:checked');
// 如果选中的数量和总数量一致，全选框选中，否则不选中
$('#checkAll').prop('checked', $allChild.length === $checkedChild.length);
});
});5. 完整HTML示例
下面是可直接运行的完整示例，包含静态复选框的联动效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>复选框联动示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div>
<label><input type="checkbox" id="checkAll">全选</label>
</div>
<div>
<label><input type="checkbox" class="child-check" value="1">选项1</label>
<label><input type="checkbox" class="child-check" value="2">选项2</label>
<label><input type="checkbox" class="child-check" value="3">选项3</label>
</div>
<script>
$(function() {
// 全选联动子复选框
$(document).on('change', '#checkAll', function() {
var isChecked = $(this).prop('checked');
$('.child-check').prop('checked', isChecked);
});
// 子复选框联动全选
$(document).on('change', '.child-check', function() {
var $allChild = $('.child-check');
var $checkedChild = $('.child-check:checked');
$('#checkAll').prop('checked', $allChild.length === $checkedChild.length);
});
});
</script>
</body>
</html>注意事项
- 不要混用
attr()和prop()操作checked属性，优先使用prop() - 动态添加复选框时，不需要重新绑定事件，因为用了on委托，新元素会自动生效
- 如果复选框有默认选中状态，需要在页面加载完成后主动触发一次子复选框的状态判断，同步全选框状态
按照上面的方法实现复选框联动，就可以避免大部分常见的失效问题，代码逻辑也更清晰易维护。