JSP/JavaScript 判斷表格內複選框是否全選、統計未選數量

需求場景

JSP 循環輸出 10 條記錄，每行首列含複選框。點擊「保存」按鈕時需：

1. 判斷是否全選
2. 若非全選，獲取未選中的數量

原生 JavaScript 實現（零依賴）

<table id="tableid">
  <c:forEach items="${list}" var="item">
    <tr>
      <td><input type="checkbox" name="ids" value="${item.id}" /></td>
      <td>${item.name}</td>
    </tr>
  </c:forEach>
</table>

<input type="button" id="save" value="保存" onclick="checkChecked()" />

<script>
function checkChecked() {
  const inputs = document.getElementById('tableid').getElementsByTagName('input');
  let checked = 0, notchecked = 0;

  for (let i = 0; i < inputs.length; i++) {
    if (inputs[i].type === 'checkbox') {
      inputs[i].checked ? checked++ : notchecked++;
    }
  }

  alert('已勾選：' + checked);
  alert('未勾選：' + notchecked);

  // 業務邏輯示例
  if (notchecked > 0) {
    if (!confirm(`尚有 ${notchecked} 條未勾選，確定保存？`)) return;
  }
  // 提交表單或 AJAX...
}
</script>

jQuery 版本（更簡潔）

function checkChecked() {
  const $chk = $('#tableid input[type="checkbox"]');
  const checked = $chk.filter(':checked').length;
  const notchecked = $chk.length - checked;

  alert(`已勾選：${checked}，未勾選：${notchecked}`);

  if (notchecked > 0 && !confirm(`尚有 ${notchecked} 條未勾選，確定保存？`)) return;
  // $('#formId').submit();
}

進階：全選/反選功能

<th><input type="checkbox" id="checkAll" /></th>

<script>
$('#checkAll').click(function() {
  $('#tableid input[name="ids"]').prop('checked', this.checked);
});

常見問題排查

最佳實踐清單

1. ✅ 給表格加唯一 id，避免全局選擇器污染
2. ✅ 優先用 type="button" 防止誤觸發表單提交
3. ✅ 複雜邏輯提取為獨立函數，便於單元測試
4. ✅ 後端仍需校驗權限與數據完整性，前端校驗僅為體驗

總結

通過 getElementsByTagName 或 jQuery 選擇器遍歷 input[type=checkbox]，即可輕鬆統計勾選狀態。核心邏輯不足 10 行，關鍵在於「精準定位表格範圍」與「區分業務必選與可選」。