【jQuery】チェックボックスを操作する完全ガイド｜状態取得・全選択・連動・バリデーションまで

チェックボックスの操作はWebフォームでよく使う実装です。jQueryを使うとチェック状態の取得・設定・全選択/全解除・連動チェックなどを簡潔に実装できます。本記事では基本から実用的なUIパターンまで解説します。

1. チェック状態の取得と設定

チェックボックスの状態には prop("checked") を使います（attr("checked") はNG）。

// 状態の取得（true / false）
var isChecked = $('#agree').prop('checked');
console.log(isChecked);  // true または false

// チェックをONにする
$('#agree').prop('checked', true);

// チェックをOFFにする
$('#agree').prop('checked', false);

// チェックを反転（トグル）
var current = $('#agree').prop('checked');
$('#agree').prop('checked', !current);

// :checked セレクタで選択済み要素を取得
var $checked = $('input[type="checkbox"]:checked');

2. チェックされた値をまとめて取得

// チェックされた全てのvalue値を配列で取得
var values = [];
$('input[name="hobby"]:checked').each(function () {
  values.push($(this).val());
});
console.log(values);  // ['読書', '映画', '旅行']

// map()を使ったスマートな書き方
var values2 = $('input[name="hobby"]:checked').map(function () {
  return $(this).val();
}).get();

// jQuery 3.x以降: toArray()でArray化
var elements = $('input:checked').toArray();
var vals = elements.map(function (el) { return el.value; });

3. 全選択・全解除ボタン

<button id="check-all">全て選択</button>
<button id="uncheck-all">全て解除</button>
<div id="checkbox-group">
  <label><input type="checkbox" name="item" value="A"> アイテムA</label>
  <label><input type="checkbox" name="item" value="B"> アイテムB</label>
  <label><input type="checkbox" name="item" value="C"> アイテムC</label>
</div>

$(function () {
  $('#check-all').on('click', function () {
    $('input[name="item"]').prop('checked', true);
  });

  $('#uncheck-all').on('click', function () {
    $('input[name="item"]').prop('checked', false);
  });
});

4. 「全て選択」チェックボックスとの連動

「全て選択」チェックボックスをONにすると全て選択、個々のチェックが全てONになると「全て選択」もONにする双方向連動の実装です。

<label><input type="checkbox" id="check-all-cb"> 全て選択</label>
<div id="items">
  <label><input type="checkbox" class="item-cb" value="1"> 項目1</label>
  <label><input type="checkbox" class="item-cb" value="2"> 項目2</label>
  <label><input type="checkbox" class="item-cb" value="3"> 項目3</label>
</div>

$(function () {
  // 全選択チェックボックスの操作
  $('#check-all-cb').on('change', function () {
    $('.item-cb').prop('checked', $(this).prop('checked'));
  });

  // 個別チェックボックスの操作（全てONなら全選択もON）
  $('.item-cb').on('change', function () {
    var total   = $('.item-cb').length;
    var checked = $('.item-cb:checked').length;
    $('#check-all-cb').prop('checked', total === checked);
    // indeterminate（中間状態）を設定
    $('#check-all-cb').prop('indeterminate', checked > 0 && checked < total);
  });
});

5. チェック数のカウントとバリデーション

$(function () {
  // チェック変更時にカウント表示を更新
  $('input[type="checkbox"]').on('change', function () {
    var count = $('input[type="checkbox"]:checked').length;
    $('#count').text(count + '件選択中');
  });

  // 送信時にバリデーション（1件以上必須）
  $('form').on('submit', function (e) {
    if ($('input[type="checkbox"]:checked').length === 0) {
      alert('少なくとも1つ選択してください');
      e.preventDefault();
    }
  });
});

6. チェックボックスの状態でUI要素を表示/非表示

$(function () {
  // チェックONで追加入力欄を表示
  $('#need-address').on('change', function () {
    if ($(this).prop('checked')) {
      $('#address-section').slideDown(300);
    } else {
      $('#address-section').slideUp(300);
    }
  });

  // 特定の値がチェックされたらボタンを有効化
  $('#agree-terms').on('change', function () {
    $('#submit-btn').prop('disabled', !$(this).prop('checked'));
  });
});

まとめ

jQueryでのチェックボックス操作は prop("checked") での状態取得・設定が基本です。全選択/全解除・連動チェック・バリデーションなど実用的なUIを比較的少ないコードで実装できます。attr("checked") は古い書き方で現在の状態を取得できないため使用しないでください。

関連記事: jQueryでselectタグの値とテキストを取得する方法 / jQueryで入力フォームバリデーションを実装する方法

よくある質問（FAQ）