【jQuery】「すべてを選択」の実装完全ガイド｜indeterminate・グループ全選択・選択件数・一括操作まで

テーブル型のUIやアンケートフォームで「すべてを選択」チェックボックスは定番の機能です。基本的な全選択/全解除から、indeterminate（中間）状態・グループ単位の全選択・選択件数のカウント・一括操作ボタンの活性化まで、実務で使えるパターンを体系的に解説します。

1. 基本実装：全選択・全解除

「すべてを選択」チェックボックスをオン/オフするだけで、配下の全チェックボックスを連動させます。

<label><input type="checkbox" id="check-all"> すべてを選択</label>
<hr>
<ul id="item-list">
  <li><label><input type="checkbox" class="item-check"> りんご</label></li>
  <li><label><input type="checkbox" class="item-check"> みかん</label></li>
  <li><label><input type="checkbox" class="item-check"> ぶどう</label></li>
  <li><label><input type="checkbox" class="item-check"> いちご</label></li>
</ul>

$(function () {
  // 「すべてを選択」チェックを操作したとき
  $('#check-all').on('change', function () {
    var isChecked = $(this).prop('checked');
    $('.item-check').prop('checked', isChecked);
  });

  // 個別チェックを操作したとき
  $('.item-check').on('change', function () {
    var total   = $('.item-check').length;
    var checked = $('.item-check:checked').length;
    // 全てチェックされていれば「すべてを選択」もオンに
    $('#check-all').prop('checked', total === checked);
  });
});

2. indeterminate（中間）状態を実装する

一部だけチェックされているとき、「すべてを選択」チェックボックスをindeterminate（ダッシュ記号で表示される中間状態）にすると、より直感的なUIになります。Google スプレッドシートなどで広く使われているパターンです。

$(function () {
  function updateParentState() {
    var total   = $('.item-check').length;
    var checked = $('.item-check:checked').length;

    if (checked === 0) {
      // 全解除
      $('#check-all').prop({ checked: false, indeterminate: false });

    } else if (checked === total) {
      // 全選択
      $('#check-all').prop({ checked: true, indeterminate: false });

    } else {
      // 一部選択 → indeterminate
      $('#check-all').prop({ checked: false, indeterminate: true });
    }
  }

  $('#check-all').on('change', function () {
    // indeterminate状態からクリックされた場合は全選択に
    var toCheck = $(this).prop('checked');
    $('.item-check').prop('checked', toCheck);
    $(this).prop('indeterminate', false);
  });

  $('.item-check').on('change', updateParentState);
});

3. グループ単位での全選択

カテゴリ別に「全選択」を独立して持たせるパターンです。「果物をすべて選択」「野菜をすべて選択」のように、グループごとに制御できます。

<div class="check-group" data-group="fruits">
  <label><input type="checkbox" class="group-all" data-group="fruits"> 果物をすべて選択</label>
  <ul>
    <li><label><input type="checkbox" class="group-item" data-group="fruits"> りんご</label></li>
    <li><label><input type="checkbox" class="group-item" data-group="fruits"> みかん</label></li>
  </ul>
</div>

<div class="check-group" data-group="vegs">
  <label><input type="checkbox" class="group-all" data-group="vegs"> 野菜をすべて選択</label>
  <ul>
    <li><label><input type="checkbox" class="group-item" data-group="vegs"> にんじん</label></li>
    <li><label><input type="checkbox" class="group-item" data-group="vegs"> ほうれん草</label></li>
  </ul>
</div>

$(function () {
  // 「グループ全選択」チェック操作
  $('.group-all').on('change', function () {
    var group     = $(this).data('group');
    var isChecked = $(this).prop('checked');
    $('.group-item[data-group="' + group + '"]').prop('checked', isChecked);
  });

  // 個別チェック操作で親チェックを更新
  $('.group-item').on('change', function () {
    var group   = $(this).data('group');
    var $items  = $('.group-item[data-group="' + group + '"]');
    var total   = $items.length;
    var checked = $items.filter(':checked').length;

    $('.group-all[data-group="' + group + '"]').prop({
      checked:       total === checked,
      indeterminate: checked > 0 && checked < total
    });
  });
});

4. 選択件数をリアルタイムに表示する

何件選択しているかをリアルタイム表示することで、ユーザーの確認ミスを防げます。削除確認ダイアログや一括処理のUIで特に有用です。

<label><input type="checkbox" id="ca-all"> すべてを選択</label>
<span id="count-display">0件選択中</span>
<ul id="ca-list">
  <li><label><input type="checkbox" class="ca-item"> 項目A</label></li>
  <li><label><input type="checkbox" class="ca-item"> 項目B</label></li>
  <li><label><input type="checkbox" class="ca-item"> 項目C</label></li>
  <li><label><input type="checkbox" class="ca-item"> 項目D</label></li>
</ul>

$(function () {
  function updateCount() {
    var count = $('.ca-item:checked').length;
    $('#count-display').text(count + '件選択中');
  }

  $('#ca-all').on('change', function () {
    $('.ca-item').prop('checked', $(this).prop('checked'));
    updateCount();
  });

  $('.ca-item').on('change', function () {
    var total   = $('.ca-item').length;
    var checked = $('.ca-item:checked').length;
    $('#ca-all').prop({
      checked:       total === checked,
      indeterminate: checked > 0 && checked < total
    });
    updateCount();
  });
});

5. 全選択＋1件以上選択を必須にするバリデーション

フォームの送信前に「1件以上選択されているか」を検証し、0件のときは送信ボタンをグレーアウトして操作を阻止します。

<form id="bulk-form">
  <label><input type="checkbox" id="val-all"> すべてを選択</label>
  <ul>
    <li><label><input type="checkbox" class="val-item" value="a"> 項目A</label></li>
    <li><label><input type="checkbox" class="val-item" value="b"> 項目B</label></li>
    <li><label><input type="checkbox" class="val-item" value="c"> 項目C</label></li>
  </ul>
  <p id="val-error" style="color:red; display:none;">1件以上選択してください。</p>
  <button type="submit" id="submit-btn" disabled>選択した項目を処理する</button>
</form>

$(function () {
  function syncAll() {
    var total   = $('.val-item').length;
    var checked = $('.val-item:checked').length;
    $('#val-all').prop({
      checked:       total === checked,
      indeterminate: checked > 0 && checked < total
    });
    // 送信ボタン: 1件以上選択で有効化
    $('#submit-btn').prop('disabled', checked === 0);
    $('#val-error').hide();  // 操作中はエラーを隠す
  }

  $('#val-all').on('change', function () {
    $('.val-item').prop('checked', $(this).prop('checked'));
    syncAll();
  });
  $('.val-item').on('change', syncAll);

  $('#bulk-form').on('submit', function (e) {
    if ($('.val-item:checked').length === 0) {
      e.preventDefault();
      $('#val-error').show();
    }
  });
});

6. チェックした項目に対する一括操作ボタンを活性化する

管理画面のリストでよく見られる「選択した項目を削除」「選択した項目をエクスポート」のような一括操作ボタンを、チェック状態に連動して活性化/非活性化するパターンです。

<div id="toolbar" style="display:flex; gap:8px; margin-bottom:8px;">
  <label><input type="checkbox" id="tb-all"> すべてを選択</label>
  <span id="tb-count" style="color:#666;">（0件選択中）</span>
  <button class="bulk-btn" id="btn-delete" disabled>削除</button>
  <button class="bulk-btn" id="btn-export" disabled>エクスポート</button>
</div>
<table id="data-table">
  <tbody>
    <tr><td><input type="checkbox" class="tb-item" value="1"></td><td>レコード 1</td></tr>
    <tr><td><input type="checkbox" class="tb-item" value="2"></td><td>レコード 2</td></tr>
    <tr><td><input type="checkbox" class="tb-item" value="3"></td><td>レコード 3</td></tr>
  </tbody>
</table>

$(function () {
  function updateToolbar() {
    var checked = $('.tb-item:checked').length;
    var total   = $('.tb-item').length;

    // 件数表示を更新
    $('#tb-count').text('（' + checked + '件選択中）');

    // 一括操作ボタンの活性化
    $('.bulk-btn').prop('disabled', checked === 0);

    // 全選択チェックの状態更新
    $('#tb-all').prop({
      checked:       total === checked,
      indeterminate: checked > 0 && checked < total
    });

    // チェック行に is-selected クラスを付けてハイライト
    $('.tb-item').closest('tr').each(function () {
      var isChecked = $(this).find('.tb-item').prop('checked');
      $(this).toggleClass('is-selected', isChecked);
    });
  }

  $('#tb-all').on('change', function () {
    $('.tb-item').prop('checked', $(this).prop('checked'));
    updateToolbar();
  });

  $('.tb-item').on('change', updateToolbar);

  // 削除ボタン
  $('#btn-delete').on('click', function () {
    $('.tb-item:checked').closest('tr').remove();
    updateToolbar();
  });
});

パターン選択の目安まとめ

まとめ

「すべてを選択」の実装は、基本のprop(“checked”)連動から始まり、indeterminate状態・グループ管理・件数表示・一括操作UIまで幅広く展開できます。本記事のパターンを組み合わせて、使いやすいUIを構築してください。

関連記事: チェックボックスを操作する完全ガイド / フォームバリデーション完全ガイド / 読み込み時にチェックボックスを判定・チェックする方法

よくある質問（FAQ）