【初心者向け】jQueryでチェックボックス操作の基礎をマスター！チェックされた要素を取得する方法

2024-05-19

jQuery で特定のクラスを持つすべてのチェックされたチェックボックスを取得する方法

:checked セレクタと . クラスセレクタを組み合わせる

最もシンプルで分かりやすい方法は、:checked セレクタと . クラスセレクタを組み合わせて使用する方法です。

$(`.your-class:checked`)

このコードは、.your-class クラスを持つすべてのチェックされたチェックボックスを jQuery オブジェクトとして選択します。

filter() メソッドを使用する

より柔軟な方法として、filter() メソッドを使用することができます。

$('input[type="checkbox"]').filter(function() {
  return $(this).hasClass('your-class') && $(this).prop('checked');
})

このコードは、すべてのチェックボックスをまず選択し、その後 filter() メソッドを使用して、.your-class クラスを持ち、かつチェックされているチェックボックスのみを残します。

each() メソッドを使用して、すべてのチェックボックスをループ処理し、.your-class クラスを持ち、かつチェックされているチェックボックスのみを処理する方法もあります。

$('input[type="checkbox"]').each(function() {
  if ($(this).hasClass('your-class') && $(this).prop('checked')) {
    // このチェックボックスを処理
  }
})

この方法では、各チェックボックスに対して個別に処理を行うことができます。

補足

上記のコード例では、.your-class を実際のクラス名に置き換えてください。
チェックされたチェックボックスの値を取得するには、val() メソッドを使用することができます。

$(`.your-class:checked`).val()

$(`.your-class:checked`).length

これらの方法を参考に、状況に合わせて適切な方法を選択してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>チェックされたチェックボックスを取得</title>
  <script src="https://jquery.com/"></script>
</head>
<body>
  <h2>商品</h2>
  <input type="checkbox" id="product1" class="product" value="1">
  <label for="product1">商品1</label><br>
  <input type="checkbox" id="product2" class="product" value="2">
  <label for="product2">商品2</label><br>
  <input type="checkbox" id="product3" class="product" value="3">
  <label for="product3">商品3</label><br>
  <input type="checkbox" id="product4" class="product">
  <label for="product4">商品4</label><br>
  <br>
  <button id="get-checked-products">チェックされた商品を取得</button>
  <script>
    $(document).ready(function() {
      $('#get-checked-products').click(function() {
        const checkedProducts = $('.product:checked');
        checkedProducts.each(function() {
          const id = $(this).attr('id');
          const value = $(this).val();
          console.log(`ID: ${id}, 値: ${value}`);
        });
      });
    });
  </script>
</body>
</html>

このコードを実行すると、以下のようになります。

ID: product1, 値: 1
ID: product2, 値: 2
ID: product3, 値: 3

説明

HTML
- product クラスを持つ複数のチェックボックスが用意されています。
- チェックボックスにはそれぞれ異なる id と value が設定されています。
- ボタンをクリックすると、JavaScript の処理が実行されます。
JavaScript
- $(document).ready(function() { ... }); : DOM がロードされたら実行される処理を記述します。
- $('#get-checked-products').click(function() { ... }); : ボタンがクリックされたら実行される処理を記述します。
- const checkedProducts = $('.product:checked'); : .product クラスを持つチェックされたチェックボックスすべてを取得して、checkedProducts 変数に代入します。
- checkedProducts.each(function() { ... }); : checkedProducts 内のチェックボックスをそれぞれ処理します。
- const id = $(this).attr('id'); : 現在のチェックボックスの id を取得して、id 変数に代入します。
- console.log(ID: ${id}, 値: ${value}); : コンソールに ID と 値 を出力します。

jQueryで特定のクラスを持つすべてのチェックされたチェックボックスを取得するその他の方法

$(`.your-class`).prop('checked')

このコードは、.your-class クラスを持つすべてのチェックボックスの checked プロパティを取得します。checked プロパティは、チェックボックスがチェックされているかどうかを表すブール値です。

is(':checked') セレクタを使用する

$(`.your-class:checked`)

filter() メソッドと hasClass() メソッドを使用する

$('input[type="checkbox"]').filter(function() {
  return $(this).hasClass('your-class');
}).filter(function() {
  return $(this).prop('checked');
})

シンプルで分かりやすい方法を求める場合は、prop() メソッドを使用する または is(':checked') セレクタを使用する がおすすめです。
より柔軟な方法を求める場合は、filter() メソッドと hasClass() メソッドを使用する がおすすめです。
処理速度が気になる場合は、prop() メソッドを使用する が最も効率的です。