jQueryチェックボックス連動

jQueryでチェックボックスを連動させる方法を徹底解説！【サンプルコード付き】

Webサイトでよく見かけるチェックボックス。複数のチェックボックスを連動させて、より快適なユーザー体験を提供したいと思ったことはありませんか？

この記事では、jQueryを使ってチェックボックスを連動させる方法について、初心者の方にも分かりやすく解説します。親要素と子要素のチェックボックスの連動、全選択・全解除、チェック状態の取得など、様々なパターンをサンプルコード付きで紹介しますので、ぜひ最後まで読んで実装してみてください。

チェックボックス連動の基本

まずは、親チェックボックスと子チェックボックスの連動について解説します。親チェックボックスの状態によって、子チェックボックスの状態も連動して変更されるように実装します。

親チェックボックスと子チェックボックスの連動

親チェックボックスがクリックされた時の処理
子チェックボックスのチェック状態を親チェックボックスに反映

サンプルコード：親チェックボックスと子チェックボックスの連動を実装するjQueryコード

<label>
  <input type="checkbox" id="parent-checkbox"> 親チェックボックス
</label>
<ul>
  <li><label><input type="checkbox" class="child-checkbox"> 子要素1</label></li>
  <li><label><input type="checkbox" class="child-checkbox"> 子要素2</label></li>
  <li><label><input type="checkbox" class="child-checkbox"> 子要素3</label></li>
</ul>

<script>
$(function() {
  $('#parent-checkbox').on('change', function() {
    $('.child-checkbox').prop('checked', $(this).prop('checked'));
  });
});
</script>

解説

$('#parent-checkbox').on('change', function() { ... }); は、親チェックボックスに変化があった時（クリックされた時）に、{}内の処理を実行します。
$('.child-checkbox').prop('checked', $(this).prop('checked')); は、全ての子チェックボックスのチェック状態を、親チェックボックスのチェック状態と同じにします。

全選択・全解除機能の実装

次に、全選択・全解除機能の実装について解説します。全選択チェックボックスをクリックすると全ての子チェックボックスが選択され、全解除チェックボックスをクリックすると全ての子チェックボックスの選択が解除されるように実装します。

サンプルコード：全選択・全解除機能を実装するjQueryコード

<label>
  <input type="checkbox" id="select-all"> 全選択
</label>
<label>
  <input type="checkbox" id="deselect-all"> 全解除
</label>
<ul>
  <li><label><input type="checkbox" class="target-checkbox"> 項目1</label></li>
  <li><label><input type="checkbox" class="target-checkbox"> 項目2</label></li>
  <li><label><input type="checkbox" class="target-checkbox"> 項目3</label></li>
</ul>

<script>
$(function() {
  $('#select-all').on('change', function() {
    $('.target-checkbox').prop('checked', true);
  });

  $('#deselect-all').on('change', function() {
    $('.target-checkbox').prop('checked', false);
  });
});
</script>

解説

$('#select-all').on('change', function() { ... }); は、全選択チェックボックスに変化があった時に、{}内の処理を実行します。
$('.target-checkbox').prop('checked', true); は、全ての対象チェックボックスのチェック状態をtrue（チェック済み）にします。
全解除チェックボックスも同様ですが、$('.target-checkbox').prop('checked', false); でチェック状態をfalse（チェックなし）に設定しています。

チェック状態の取得と応用

最後に、チェックされているチェックボックスの値を取得する方法と、チェック状態に応じて処理を分岐する方法について解説します。

チェックされているチェックボックスの値を取得する方法

<ul>
  <li><label><input type="checkbox" class="item-checkbox" value="apple"> りんご</label></li>
  <li><label><input type="checkbox" class="item-checkbox" value="banana"> バナナ</label></li>
  <li><label><input type="checkbox" class="item-checkbox" value="orange"> オレンジ</label></li>
</ul>
<button id="get-checked-values">チェックした項目を取得</button>
<div id="checked-values"></div>

<script>
$(function() {
  $('#get-checked-values').on('click', function() {
    const checkedValues = [];
    $('.item-checkbox:checked').each(function() {
      checkedValues.push($(this).val());
    });
    $('#checked-values').text('チェックした項目：' + checkedValues.join(', '));
  });
});
</script>

解説

$('.item-checkbox:checked') でチェックされているチェックボックスを取得します。
.each(function() { ... }); で、チェックされているチェックボックスそれぞれに対して処理を行います。
$(this).val() でチェックされているチェックボックスのvalue属性の値を取得します。

まとめ

この記事では、jQueryを使ってチェックボックスを連動させる方法について解説しました。親要素と子要素の連動、全選択・全解除、チェック状態の取得など、様々なパターンをサンプルコード付きで紹介しました。

これらのサンプルコードを参考に、自身のWebサイトにもチェックボックス連動機能を実装して、より快適なユーザー体験を提供してみてください。

参考資料

チェックボックス連動に関するQ&A

Q1: チェックボックスの連動がうまくいきません。

A1: コードが正しく記述されているか、要素の指定が間違っていないかを確認してください。特に、セレクタが正しいか、親要素と子要素の関係が正しく指定されているかを確認しましょう。また、JavaScriptコンソールにエラーが表示されていないか確認することも重要です。

Q2: チェックボックスの値を配列ではなく、カンマ区切りの文字列で取得したい場合はどうすればよいですか？

A2: checkedValues.join(', ') を使用して、配列の要素をカンマ区切りの文字列に変換できます。

Q3: 特定の条件を満たすチェックボックスのみ連動させたい場合はどうすればよいですか？

A3: $('.child-checkbox') の部分を、条件に合う要素のみを指定するセレクタに変更します。例えば、特定の属性を持つ要素のみを対象とする場合は、属性セレクタを使用します。

その他の参考記事:jquery チェックボックス外す