jQuery 實作複選框全選、反選與狀態同步

表單處理中常見的「全選/取消全選/反選」功能，用 jQuery 幾行程式碼即可優雅完成。本文提供可直接套用的模組化寫法，並處理「子項全選時自動勾選全選框」的雙向同步邏輯。

HTML 結構

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<label><input type="checkbox" id="selectAll"> 全選</label>
<label><input type="checkbox" id="reverse"> 反選</label>

<ul id="itemList">
  <li><label><input type="checkbox" name="subBox" value="1"> 項目 1</label></li>
  <li><label><input type="checkbox" name="subBox" value="2"> 項目 2</label></li>
  <li><label><input type="checkbox" name="subBox" value="3"> 項目 3</label></li>
  <!-- 更多項目 -->
</ul>

jQuery 核心邏輯

$(function() {
  var $sub = $('input[name="subBox"]');
  var $all = $('#selectAll');
  var $rev = $('#reverse');

  // 全選 / 取消全選
  $all.on('click', function() {
    $sub.prop('checked', this.checked);
  });

  // 反選
  $rev.on('click', function() {
    $sub.each(function() {
      this.checked = !this.checked;
    });
    syncSelectAll();
  });

  // 子項變更時同步全選框狀態
  $sub.on('change', syncSelectAll);

  function syncSelectAll() {
    $all.prop('checked', $sub.length === $sub.filter(':checked').length);
  }
});

關鍵 API 差異說明

進階擴充：取得已選值陣列

function getSelectedValues() {
  return $sub.filter(':checked').map(function() { return this.value; }).get();
}
// 回傳如 ['1', '3']，直接可用於 AJAX 參數

無障礙與體驗優化

• 為每個 <input> 關聯 <label>，點擊文字即可切換，符合 WCAG。
• 全選框狀態三態：全選、部分選、未選。可用 CSS indeterminate 偽類呈現「部分選」視覺：

$all.prop('indeterminate', $sub.filter(':checked').length > 0 && $sub.filter(':checked').length < $sub.length);