jQueryで複数のチェックボックスを操作！チェックボックスを使いこなすための完全ガイド

jquery checkbox 複数チェックする

jQueryを使って複数のチェックボックスを一括選択、選択解除、状態取得など、自由自在に操作する方法を解説します。初心者の方にも分かりやすいように、サンプルコードと解説付きで、チェックボックス操作の悩みを解決します。

複数のチェックボックスを一括操作

すべてのチェックボックスを選択する

`prop()` メソッドを使って、すべてのチェックボックスのchecked属性をtrueにすることで、すべてのチェックボックスを選択することができます。


  <button id="selectAll">すべて選択</button>
  <input type="checkbox" name="fruits" value="apple">りんご
  <input type="checkbox" name="fruits" value="orange">みかん
  <input type="checkbox" name="fruits" value="banana">バナナ

  <script>
  $(function() {
    $('#selectAll').click(function() {
      $('input[name="fruits"]').prop('checked', true);
    });
  });
  </script>

「すべて選択」ボタンをクリックすると、すべてのチェックボックスが選択されます。

すべてのチェックボックスの選択を解除する

`prop()` メソッドを使って、すべてのチェックボックスのchecked属性をfalseにすることで、すべてのチェックボックスの選択を解除することができます。


  <button id="deselectAll">すべて選択解除</button>
  <input type="checkbox" name="fruits" value="apple">りんご
  <input type="checkbox" name="fruits" value="orange">みかん
  <input type="checkbox" name="fruits" value="banana">バナナ

  <script>
  $(function() {
    $('#deselectAll').click(function() {
      $('input[name="fruits"]').prop('checked', false);
    });
  });
  </script>

「すべて選択解除」ボタンをクリックすると、すべてのチェックボックスの選択が解除されます。

特定の条件に合致するチェックボックスを選択する

`filter()` メソッドと `:checked` セレクタを組み合わせることで、特定の条件に合致するチェックボックスを選択することができます。

例えば、値が"apple"のチェックボックスのみを選択する場合は、以下のコードを実行します。


  <button id="selectApple">りんごのみ選択</button>
  <input type="checkbox" name="fruits" value="apple">りんご
  <input type="checkbox" name="fruits" value="orange">みかん
  <input type="checkbox" name="fruits" value="banana">バナナ

  <script>
  $(function() {
    $('#selectApple').click(function() {
      $('input[name="fruits"]').prop('checked', false); // まずすべて選択解除
      $('input[name="fruits"][value="apple"]').prop('checked', true);
    });
  });
  </script>

「りんごのみ選択」ボタンをクリックすると、"りんご"のチェックボックスのみが選択されます。

チェックボックスの状態を取得する

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

`each()` メソッドを使って、チェックされているチェックボックスの値を配列に格納することができます。


  <button id="getSelectedValues">選択された値を取得</button>
  <input type="checkbox" name="fruits" value="apple">りんご
  <input type="checkbox" name="fruits" value="orange">みかん
  <input type="checkbox" name="fruits" value="banana">バナナ

  <script>
  $(function() {
    $('#getSelectedValues').click(function() {
      var selectedValues = [];
      $('input[name="fruits"]:checked').each(function() {
        selectedValues.push($(this).val());
      });
      alert("選択された値: " + selectedValues.join(', ')); 
    });
  });
  </script>

チェックを入れた状態で「選択された値を取得」ボタンをクリックすると、選択されたチェックボックスの値がアラートで表示されます。

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

`:checked` セレクタと `length` プロパティを使うことで、チェックされているチェックボックスの数を取得することができます。


  <button id="getCheckedCount">選択された数を取得</button>
  <input type="checkbox" name="fruits" value="apple">りんご
  <input type="checkbox" name="fruits" value="orange">みかん
  <input type="checkbox" name="fruits" value="banana">バナナ

  <script>
  $(function() {
    $('#getCheckedCount').click(function() {
      var checkedCount = $('input[name="fruits"]:checked').length;
      alert("選択された数: " + checkedCount);
    });
  });
  </script>

チェックを入れた状態で「選択された数を取得」ボタンをクリックすると、選択されたチェックボックスの数がアラートで表示されます。

まとめ

本記事で紹介したjQueryのメソッドを使えば、複数のチェックボックスを効率的に操作できます。チェックボックス操作に困ったら、この記事を参考にしてください。

応用例

フォームの送信：ユーザーが選択した項目をサーバーに送信する際に、チェックボックスの状態を取得する
データのフィルタリング：チェックボックスで選択された条件に基づいて、表示するデータを絞り込む
一覧表示の制御：チェックボックスを使って、一覧表示の項目の表示/非表示を切り替える

参考資料

Q&A

Q1: チェックボックスの状態によって、別の要素の表示/非表示を切り替えたい場合はどうすれば良いですか？

A1: チェックボックスの状態を取得し、`show()` メソッドや `hide()` メソッドを使って、別の要素の表示/非表示を切り替えることができます。

Q2: チェックボックスを動的に生成する場合は、どのようにイベントを設定すれば良いですか？

A2: `on()` メソッドを使って、動的に生成された要素に対してもイベントを設定することができます。

Q3: チェックボックスの操作に関する便利なプラグインはありますか？

A3: チェックボックスの操作をより便利にするプラグインは多数存在します。例えば、"iCheck" や "Bootstrap Checkbox" などがあります。これらのプラグインを利用することで、より簡単に、スタイリッシュなチェックボックスを実装することができます。

その他の参考記事:jquery checkbox checked