在后台管理列表、问卷表单以及权限分配面板中，经常需要让用户通过复选框批量操作数据。如果能在用户点击的瞬间就告诉他们当前选了几个、是不是全部选完了，体验会顺畅很多。jQuery作为成熟的DOM操作库，处理这类需求不需要复杂逻辑，重点在于正确读取复选框状态并做数量比对。
事件绑定与基础结构搭建
要实现动态反馈，第一步是规划HTML结构。通常我们会放一个“全选”复选框，它的class或id用于单独控制，再放一组普通选项复选框，它们拥有相同的class方便统一选取。jQuery里用$(selector).on('change', handler)来绑定变更事件，比老式的bind更灵活，也能兼容动态添加的元素。
很多初学者喜欢把全选框和普通框混在同一个选择器里，结果统计总数时把全选框也算进去，导致“已选数量”永远多一个。正确做法是给普通选项加统一类名如item-check，全选框用check-all区分。这样在统计时只数.item-check的长度，逻辑更清晰，也避免后续维护时踩坑。
下面是一个基础结构示例，全选框与列表项分离，为后面的数量计算打好底子：
<table>
<thead>
<tr>
<th><input type="checkbox" id="check-all"> 全选</th>
<th>名称</th>
</tr>
</thead>
<tbody>
<tr><td><input type="checkbox" class="item-check" value="1"></td><td>选项一</td></tr>
<tr><td><input type="checkbox" class="item-check" value="2"></td><td>选项二</td></tr>
<tr><td><input type="checkbox" class="item-check" value="3"></td><td>选项三</td></tr>
</tbody>
</table>
<p id="feedback">未选择任何项</p>
数量统计与全选部分选择的判断逻辑
动态反馈的核心是每次复选框变化后重新计算。利用jQuery的filter方法可以很方便地筛选出被选中的项：$('.item-check').filter(':checked')返回的是已勾选的jQuery对象，取其length即为选中数。总数则是$('.item-check').length。当选中数等于总数且总数大于零时，就是全选状态；小于总数则是部分选择；等于零就是未选。
这里要特别注意prop和attr的区别。在jQuery 1.6之后，对于checked这种属性应该用prop('checked')读取，因为它反映的是当前DOM的真实状态，而attr读的是初始HTML属性，在用户交互后可能失准。如果误用attr，会出现勾选了但脚本认为没勾的诡异bug。
判断逻辑写成一个独立函数最利于复用。每次change事件触发都调用它，由它来更新提示文字，同时同步全选框自身的勾选状态（比如手动取消一项时，全选框应自动取消勾选）。代码示例如下：
function updateFeedback() {
var total = $('.item-check').length;
var checked = $('.item-check').filter(':checked').length;
var $all = $('#check-all');
if (checked === 0) {
$('#feedback').text('未选择任何项');
$all.prop('checked', false);
} else if (checked === total) {
$('#feedback').text('已全选（共 ' + total + ' 项）');
$all.prop('checked', true);
} else {
$('#feedback').text('已选 ' + checked + ' 项，部分选择');
$all.prop('checked', false);
}
}
$('.item-check').on('change', updateFeedback);
全选框的联动控制与边界处理
全选框本身也要绑定change事件，当它被勾选时，所有.item-check都应设为选中；取消时则全部清空。这一步如果用prop('checked', true)批量赋值，再手动调用一次updateFeedback就能保持文字反馈一致。不过要注意事件冒泡：全选框变更会触发自身handler，如果里面又去改子项并触发子项change，可能造成重复计算，因此直接赋值后调函数即可，不必再trigger子项事件。
边界情况往往决定脚本是否健壮。比如列表通过Ajax动态加载，新加的复选框若用原先的$('.item-check').on绑定则失效，应改为委托绑定：$(document).on('change', '.item-check', updateFeedback)。还有当total为0时，全选框应禁用，防止用户点空全选。这些细节补齐后，组件才能真正用于生产环境。
综合来看，把全选联动和反馈更新拆成清晰的两段事件处理，并抽取统计函数，是jQuery实现该需求最稳的写法。下方给出完整联动代码，包含动态禁用与委托：
$(document).on('change', '#check-all', function() {
var isChecked = $(this).prop('checked');
$('.item-check').prop('checked', isChecked);
updateFeedback();
});
$(document).on('change', '.item-check', updateFeedback);
function refreshAllState() {
var total = $('.item-check').length;
$('#check-all').prop('disabled', total === 0);
updateFeedback();
}
// 假设动态加载后调用 refreshAllState()
通过上述三层结构，事件绑定、数量判断、全选联动各自独立又相互协作，就能在jQuery中干净地实现复选框选择数量的动态反馈，并准确区分全选与部分选择状态。