咨询：如何使用jQuery实现复选框选中数量的动态更新

嘿，我来帮你搞定这个动态计数的需求！你已经摸到门道了，只需要把获取到的选中数量绑定到目标元素上，再配合事件监听就能实现实时更新，下面是具体步骤：

1. 封装通用的计数更新函数 #

先写一个可复用的函数，专门用来计算选中数量并更新到指定的<span>里，后续不管是单个复选框变化还是全选操作，都能调用它：

function updateSelectedCount() {
  // 注意加`:checked`筛选器，才能拿到**选中的**复选框数量（你之前的写法是获取总数量哦）
  const selectedCount = $('.individual:checked').length;
  // 将数值更新到id为count-checked-checkboxes的span元素中
  $('#count-checked-checkboxes').text(selectedCount);
}

2. 监听单个复选框的状态变化 #

给每个class为individual的复选框绑定change事件，这样用户每点击一次复选框，就会触发计数更新：

// 确保页面DOM加载完成后再执行逻辑
$(document).ready(function() {
  // 绑定复选框的change事件
  $('.individual').on('change', updateSelectedCount);
  
  // 页面初始化时先执行一次，避免初始显示的0和实际选中状态不符
  updateSelectedCount();
});

3. 处理“全选/取消全选”按钮 #

针对页面里的“Select All 29 Records”链接，添加全选切换逻辑，同时同步更新计数：

$('.number-records').on('click', function(e) {
  e.preventDefault(); // 阻止链接默认的跳转行为
  
  // 判断当前是否已经全选
  const totalCheckboxes = $('.individual').length;
  const selectedCheckboxes = $('.individual:checked').length;
  const shouldCheckAll = selectedCheckboxes !== totalCheckboxes;
  
  // 切换所有复选框的选中状态
  $('.individual').prop('checked', shouldCheckAll);
  
  // 更新选中计数
  updateSelectedCount();
  
  // 优化用户体验：切换按钮文本，全选后显示"Unselect All Records"
  $(this).text(shouldCheckAll ? 'Unselect All Records' : 'Select All 29 Records');
});

效果验证 #

把这些代码放到你的脚本文件或者页面的<script>标签里（记得确保jQuery已经正确引入），就能实现：

• 页面加载时自动显示当前选中的数量
• 单个复选框点击时实时更新计数
• 点击全选按钮时批量切换状态，同时更新计数和按钮文本

这样整个功能就完整啦！

内容的提问来源于stack exchange，提问作者Rob