在列表类页面中，通常会有一个全选主选框和多个子复选框，需要实现子选框全部选中时主选框自动勾选，部分选中时主选框显示半选状态，全部未选中时主选框取消勾选的效果，这种联动逻辑用jQuery可以很简洁地实现。
核心实现思路
要实现智能控制主选框状态，核心逻辑分为两步：第一步是给所有子复选框绑定change事件，每次子选框状态变化时重新计算主选框的状态；第二步是根据当前子选框的选中数量，判断主选框应该处于什么状态。
状态判断规则如下：
- 如果选中的子复选框数量等于子复选框总数量，主选框设置为选中状态
- 如果选中的子复选框数量大于0且小于总数量，主选框设置为半选状态
- 如果选中的子复选框数量等于0，主选框设置为未选中状态
基础HTML结构
首先准备基础的页面结构，包含一个主选框和多个子复选框：
<div class="checkbox-container">
<div>
<input type="checkbox" id="mainCheckbox">
<label for="mainCheckbox">全选</label>
</div>
<ul class="sub-checkbox-list">
<li>
<input type="checkbox" class="sub-checkbox" value="1">
<label>选项一</label>
</li>
<li>
<input type="checkbox" class="sub-checkbox" value="2">
<label>选项二</label>
</li>
<li>
<input type="checkbox" class="sub-checkbox" value="3">
<label>选项三</label>
</li>
<li>
<input type="checkbox" class="sub-checkbox" value="4">
<label>选项四</label>
</li>
</ul>
</div>jQuery实现代码
接下来编写jQuery逻辑，实现子选框状态变化时的主选框状态更新，以及主选框点击时的子选框全选/全不选控制：
$(function() {
// 获取主选框和所有子选框
var $mainCheckbox = $('#mainCheckbox');
var $subCheckboxes = $('.sub-checkbox');
// 更新主选框状态的函数
function updateMainCheckboxState() {
// 统计选中的子选框数量
var checkedCount = $subCheckboxes.filter(':checked').length;
var totalCount = $subCheckboxes.length;
// 根据选中数量判断主选框状态
if (checkedCount === totalCount) {
// 全部选中，主选框勾选，取消半选
$mainCheckbox.prop('checked', true);
$mainCheckbox.prop('indeterminate', false);
} else if (checkedCount > 0) {
// 部分选中，主选框设置为半选状态
$mainCheckbox.prop('checked', false);
$mainCheckbox.prop('indeterminate', true);
} else {
// 全部未选中，主选框取消勾选，取消半选
$mainCheckbox.prop('checked', false);
$mainCheckbox.prop('indeterminate', false);
}
}
// 子选框状态变化时更新主选框
$subCheckboxes.on('change', function() {
updateMainCheckboxState();
});
// 主选框点击时控制所有子选框
$mainCheckbox.on('change', function() {
var isChecked = $(this).prop('checked');
// 取消主选框的半选状态
$mainCheckbox.prop('indeterminate', false);
// 设置所有子选框的状态和主选框一致
$subCheckboxes.prop('checked', isChecked);
});
// 页面初始化时先执行一次状态更新
updateMainCheckboxState();
});关键注意点
实现过程中有几个需要注意的细节：
- 复选框的半选状态需要通过
indeterminate属性设置，这个属性不属于HTML标准属性，但是所有主流浏览器都支持，只能通过JavaScript设置，无法通过HTML属性直接定义 - 使用
prop()方法而不是attr()方法设置checked和indeterminate属性，因为这两个属性是DOM元素的固有属性，prop()才能正确获取和设置实时状态 - 主选框点击时如果之前是半选状态，默认会切换为未选中，所以需要在点击事件中主动取消半选状态，避免状态显示异常
兼容性说明
上述实现方式兼容所有主流浏览器，包括Chrome、Firefox、Edge、Safari等，半选状态的显示在不同浏览器中表现一致。如果需要兼容更早版本的IE浏览器，需要注意jQuery版本的选择，1.x版本的jQuery对旧IE的支持更好，但核心逻辑不需要调整。