基于复选框选择的jQuery文本显隐及相关功能实现求助

首先得提醒你：因为表格是通过AJAX局部视图动态加载的，必须用事件委托绑定事件，不然新加载出来的复选框不会触发任何逻辑。下面是针对你三个需求的完整落地代码，逻辑清晰且适配动态场景：

1. 先修正基础HTML（补全闭合标签避免结构问题） #

<li>
  <p class="records-selected">
    <span id="selected"></span> of <span id="total"></span> records selected
  </p>
</li>
<li>
  <a href="#" class="selectall">Select All 29 Records</a>
</li>
<!-- 假设你的按钮结构如下，可根据实际调整 -->
<button class="btn1" disabled>批量操作</button>
<button class="btn2" disabled>单个操作</button>

2. 完整jQuery代码实现 #

// 用事件委托绑定复选框change事件（适配AJAX动态加载的新元素）
$(document).on('change', '.individual', updateSelectionState);

// 绑定全选链接的点击事件
$(document).on('click', '.selectall', function(e) {
  e.preventDefault(); // 阻止默认跳转行为
  // 实现"切换全选/取消全选"逻辑，若要固定为"点击即全选"，把!isAllSelected改成true即可
  const isAllSelected = $('.individual:checked').length === $('.individual').length;
  $('.individual').prop('checked', !isAllSelected);
  // 手动触发状态更新
  updateSelectionState();
});

// 核心状态更新函数：统一处理统计显示、按钮状态
function updateSelectionState() {
  const checkedCount = $('.individual:checked').length;
  const totalCount = $('.individual').length;

  // 需求1：控制统计文本的显示/隐藏
  if (checkedCount > 0) {
    $('.records-selected').show();
    $('#selected').text(checkedCount);
    $('#total').text(totalCount);
  } else {
    $('.records-selected').hide();
  }

  // 需求3：精准控制按钮状态
  const $btn1 = $('.btn1');
  const $btn2 = $('.btn2');
  
  if (checkedCount === 0) {
    // 未选中任何项：两个按钮都禁用
    $btn1.prop('disabled', true);
    $btn2.prop('disabled', true);
  } else if (checkedCount === 1) {
    // 选中1个：禁用.btn2，启用.btn1（按你需求实现，可根据实际业务调整）
    $btn1.prop('disabled', false);
    $btn2.prop('disabled', true);
  } else if (checkedCount > 1) {
    // 选中多个：启用.btn1，禁用.btn2
    $btn1.prop('disabled', false);
    $btn2.prop('disabled', true);
  }
}

// 页面初始化时执行一次，设置初始状态
$(function() {
  updateSelectionState();
});

// 关键：AJAX加载表格完成后，必须调用这个函数更新状态！
// 示例AJAX回调：
// $.ajax({
//   url: '你的表格接口地址',
//   success: function(html) {
//     $('#表格容器ID').html(html);
//     updateSelectionState(); // 加载完新表格后更新统计和按钮状态
//   }
// });

重要细节说明 #

• 事件委托的必要性：直接绑定.individual的change事件只会对页面初始DOM生效，新AJAX加载的复选框不会触发。用$(document).on('change', '.individual', ...)可以监听所有当前和未来的.individual元素事件。
• 全选逻辑的灵活性：代码里实现的是"点击切换全选/取消全选"，如果业务需求是"点击就强制全选"，把!isAllSelected改成true即可。
• AJAX回调后的状态更新：每次加载新表格后一定要调用updateSelectionState()，否则新表格的复选框初始状态不会被统计，按钮状态也会出错。

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