多选框的条件联动控制是前端表单交互中常见的需求，比如选择某个主选项后，对应的子多选框才允许操作，或者根据其他输入框的内容动态过滤可选的多选框选项。使用jQuery可以很便捷地操作DOM元素、绑定事件，快速实现这类联动逻辑。
实现核心思路
实现多选框条件联动的核心逻辑可以分为三步：首先监听触发联动的源元素的事件，比如下拉框的change事件、其他多选框的click事件；然后在事件回调中获取源元素的当前状态或值；最后根据获取到的状态，操作目标多选框的属性，比如禁用状态、选中状态等。
基础示例：主多选框控制子多选框
我们先实现一个简单的场景：当勾选主多选框时，所有子多选框变为可操作状态，取消勾选主多选框时，子多选框全部禁用并取消选中。
HTML结构
首先准备基础的表单结构，包含一个主多选框和三个子多选框：
<form id="linkageForm">
<div>
<label>
<input type="checkbox" id="mainCheckbox"> 启用子选项
</label>
</div>
<div class="sub-checkbox-group">
<label><input type="checkbox" name="sub" value="1"> 选项一</label>
<label><input type="checkbox" name="sub" value="2"> 选项二</label>
<label><input type="checkbox" name="sub" value="3"> 选项三</label>
</div>
</form>jQuery实现逻辑
接下来编写jQuery代码，监听主多选框的change事件，根据主多选框的选中状态控制子多选框：
$(function() {
// 监听主多选框的change事件
$('#mainCheckbox').on('change', function() {
// 获取主多选框的选中状态
var isChecked = $(this).prop('checked');
// 获取所有子多选框
var $subCheckboxes = $('input[name="sub"]');
if (isChecked) {
// 主多选框选中，启用子多选框
$subCheckboxes.prop('disabled', false);
} else {
// 主多选框未选中，禁用子多选框并取消选中
$subCheckboxes.prop({
'disabled': true,
'checked': false
});
}
});
// 初始化时触发一次事件，同步初始状态
$('#mainCheckbox').trigger('change');
});进阶示例：多选框组联动过滤
再实现一个更复杂的场景：有两个多选框组A和B，当勾选A组的某些选项时，B组只显示和A组选中项关联的选项，其余选项隐藏并禁用。
HTML结构
为选项添加data属性来建立关联关系：
<form id="filterForm">
<div>
<p>选择分类（A组）：</p>
<label><input type="checkbox" name="category" value="fruit" data-rel="apple,banana"> 水果</label>
<label><input type="checkbox" name="category" value="vegetable" data-rel="carrot,tomato"> 蔬菜</label>
<label><input type="checkbox" name="category" value="meat" data-rel="pork,beef"> 肉类</label>
</div>
<div>
<p>选择具体项（B组）：</p>
<label class="item" data-type="fruit"><input type="checkbox" name="item" value="apple"> 苹果</label>
<label class="item" data-type="fruit"><input type="checkbox" name="item" value="banana"> 香蕉</label>
<label class="item" data-type="vegetable"><input type="checkbox" name="item" value="carrot"> 胡萝卜</label>
<label class="item" data-type="vegetable"><input type="checkbox" name="item" value="tomato"> 番茄</label>
<label class="item" data-type="meat"><input type="checkbox" name="item" value="pork"> 猪肉</label>
<label class="item" data-type="meat"><input type="checkbox" name="item" value="beef"> 牛肉</label>
</div>
</form>jQuery实现逻辑
监听A组多选框的change事件，动态筛选B组的选项：
$(function() {
// 监听A组多选框的change事件
$('input[name="category"]').on('change', function() {
// 获取所有选中的A组选项
var $checkedCategories = $('input[name="category"]:checked');
// 收集所有关联的类型值
var relatedTypes = [];
$checkedCategories.each(function() {
var rel = $(this).data('rel');
if (rel) {
// 将data-rel中的值拆分后加入数组
relatedTypes = relatedTypes.concat(rel.split(','));
}
});
// 遍历B组所有选项
$('.item').each(function() {
var $item = $(this);
var type = $item.data('type');
var $checkbox = $item.find('input[name="item"]');
if (relatedTypes.length === 0) {
// 没有选中任何A组选项，隐藏所有B组选项并禁用
$item.hide();
$checkbox.prop({
'disabled': true,
'checked': false
});
} else if (relatedTypes.indexOf(type) !== -1) {
// 当前B组选项属于选中的关联类型，显示并启用
$item.show();
$checkbox.prop('disabled', false);
} else {
// 不属于关联类型，隐藏并禁用
$item.hide();
$checkbox.prop({
'disabled': true,
'checked': false
});
}
});
});
// 初始化触发一次，同步初始状态
$('input[name="category"]').trigger('change');
});注意事项
- 操作多选框的选中状态要使用
prop('checked')而不是attr('checked')，因为attr获取的是初始属性值，不会随状态变化更新。 - 如果联动逻辑复杂，建议将状态判断逻辑抽成独立函数，避免事件回调过于臃肿，方便后续维护。
- 初始化时最好手动触发一次源元素的事件，确保页面加载完成后目标多选框的状态和源元素当前状态同步，避免出现状态不一致的问题。
- 如果多选框是动态生成的，需要使用事件委托的方式绑定事件，比如
$(document).on('change', 'input[name="category"]', function() { ... })，确保动态添加的元素也能触发联动逻辑。