如何在jQuery中统计选中复选框并支持排除指定复选框

核心思路 #

给无关复选框添加专属类标记，统计时直接排除这类复选框，同时自动禁用它们避免误操作，核心是通过类选择器区分统计范围。

具体实现步骤 #

1. 标记无关项：给需要排除的复选框加类名（比如.irrelevant），初始化时自动禁用这些复选框
2. 限定统计范围：计算总数和已选数时，只筛选未标记为无关的复选框
3. 实时更新逻辑：监听复选框的change事件，每次状态变化时重新计算并更新显示数据

代码示例 #

HTML 结构

<div class="checklist">
  <label><input type="checkbox" class="check-item"> 相关项1</label>
  <label><input type="checkbox" class="check-item"> 相关项2</label>
  <label><input type="checkbox" class="check-item irrelevant"> 无关项1</label>
  <label><input type="checkbox" class="check-item"> 相关项3</label>
  <label><input type="checkbox" class="check-item irrelevant"> 无关项2</label>
</div>
<div class="stats">
  已选中：<span id="selected-count">0</span>/<span id="total-count">0</span>
  <br>
  合规百分比：<span id="compliance-percent">0%</span>
</div>

CSS 样式（可选，用于视觉区分无关项）

.irrelevant {
  opacity: 0.6;
}
.irrelevant + span {
  color: #999;
}

JavaScript 逻辑

// 获取DOM元素
const checkItems = document.querySelectorAll('.check-item');
const selectedCountEl = document.getElementById('selected-count');
const totalCountEl = document.getElementById('total-count');
const compliancePercentEl = document.getElementById('compliance-percent');

// 初始化：禁用无关复选框并计算初始统计
function initChecklist() {
  document.querySelectorAll('.irrelevant').forEach(el => {
    el.disabled = true;
  });
  updateStats();
}

// 更新统计数据
function updateStats() {
  // 筛选出所有相关复选框（排除.irrelevant类）
  const relevantChecks = Array.from(checkItems).filter(el => !el.classList.contains('irrelevant'));
  const total = relevantChecks.length;
  const selected = relevantChecks.filter(el => el.checked).length;
  // 处理总数为0的边界情况，避免计算错误
  const percent = total > 0 ? Math.round((selected / total) * 100) : 0;

  // 更新页面显示
  selectedCountEl.textContent = selected;
  totalCountEl.textContent = total;
  compliancePercentEl.textContent = `${percent}%`;
}

// 监听复选框状态变化
checkItems.forEach(el => {
  el.addEventListener('change', updateStats);
});

// 页面加载完成后初始化
initChecklist();

关键说明 #

• 用类名标记无关项的方式扩展性强，后续新增/移除无关项只需修改类名即可
• 统计逻辑通过filter精准限定范围，确保数据计算准确
• 提前禁用无关复选框，从交互层面避免用户误操作
• 处理了总数为0的边界情况，防止出现NaN的异常百分比

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