jQueryでチェックボックスを自在に操る！div内のチェックされたチェックボックスをリスト化する方法

2024-05-13

jQueryを使ってdiv内のチェックされたチェックボックスのリストを取得する方法

必要なもの

jQueryライブラリがインストールされていること
チェックボックスを含むHTML要素

手順

チェックボックスのセレクタを選択する

まず、チェックボックスのセレクタを選択する必要があります。セレクタは、CSSセレクタと同じように記述できます。例えば、div内のすべてのチェックボックスを取得するには、次のセレクタを使用できます。

div input[type="checkbox"]

filter()メソッドを使用して、チェックされたチェックボックスのみを選択する

次に、filter()メソッドを使用して、チェックされたチェックボックスのみを選択します。filter()メソッドには、チェックボックスがチェックされているかどうかを確認するブール値を返す関数を渡す必要があります。

var checkedCheckboxes = $("div input[type='checkbox']").filter(":checked");

チェックされたチェックボックスのリストを処理する

最後に、each()メソッドを使用して、チェックされたチェックボックスのリストを処理できます。each()メソッドには、各チェックボックスを処理する関数を渡す必要があります。この関数内で、チェックボックスの値やその他の属性にアクセスできます。

checkedCheckboxes.each(function() {
  console.log($(this).val());
});

例

次の例では、div内のすべてのチェックされたチェックボックスの値をコンソールに出力します。

<div>
  <input type="checkbox" value="1" checked>
  <input type="checkbox" value="2">
  <input type="checkbox" value="3" checked>
</div>

<script>
  $(document).ready(function() {
    var checkedCheckboxes = $("div input[type='checkbox']").filter(":checked");

    checkedCheckboxes.each(function() {
      console.log($(this).val());
    });
  });
</script>

補足

is()メソッドを使用して、チェックボックスがチェックされているかどうかを確認することもできます。

var checkedCheckboxes = $("div input[type='checkbox']").is(":checked");

var checkedCheckboxes = $("div input[type='checkbox']").prop(":checked");

<!DOCTYPE html>
<html>
<head>
  <title>Get a list of checked checkboxes</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="myDiv">
    <input type="checkbox" name="checkbox1" value="1" checked>
    <input type="checkbox" name="checkbox2" value="2">
    <input type="checkbox" name="checkbox3" value="3" checked>
  </div>

  <script>
    $(document).ready(function() {
      var checkedCheckboxes = $("#myDiv input[type='checkbox']:checked");

      checkedCheckboxes.each(function() {
        console.log($(this).val());
      });
    });
  </script>
</body>
</html>

このコードは以下の動作をします。

jQuery ライブラリを <script> タグを使用して読み込みます。
#myDiv 要素内のすべてのチェックボックスを選択します。
:checked 疑似クラスを使用して、チェックされているチェックボックスのみを選択します。
各チェックボックスの val() プロパティを使用して、チェックボックスの値をコンソールに出力します。

このコードをカスタマイズして、ニーズに合わせることができます。例えば、チェックボックスの値を別の方法で処理したり、チェックされたチェックボックスの数をカウントしたりできます。

jQueryを使ってdiv内のチェックされたチェックボックスのリストを取得するその他の方法

map()メソッドを使用して、チェックされたチェックボックスの配列を作成できます。この配列には、各チェックボックスの値が含まれます。

var checkedCheckboxes = $("div input[type='checkbox']:checked").map(function() {
  return $(this).val();
});

var checkedCheckboxes = $("div input[type='checkbox']:checked").toArray();

使用する方法は、ニーズによって異なります。

チェックボックスの値のみが必要な場合は、map()メソッドを使用するのが最善の方法です。
チェックボックスのjQueryオブジェクトが必要な場合は、toArray()メソッドを使用する必要があります。
チェックされたチェックボックスのリストを処理する必要がある場合は、each()メソッドを使用する必要があります。

以下に、上記の各方法の例を示します。

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

<!DOCTYPE html>
<html>
<head>
  <title>Get a list of checked checkboxes using map()</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="myDiv">
    <input type="checkbox" name="checkbox1" value="1" checked>
    <input type="checkbox" name="checkbox2" value="2">
    <input type="checkbox" name="checkbox3" value="3" checked>
  </div>

  <script>
    $(document).ready(function() {
      var checkedCheckboxes = $("#myDiv input[type='checkbox']:checked").map(function() {
        return $(this).val();
      });

      console.log(checkedCheckboxes);
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Get a list of checked checkboxes using toArray()</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="myDiv">
    <input type="checkbox" name="checkbox1" value="1" checked>
    <input type="checkbox" name="checkbox2" value="2">
    <input type="checkbox" name="checkbox3" value="3" checked>
  </div>

  <script>
    $(document).ready(function() {
      var checkedCheckboxes = $("#myDiv input[type='checkbox']:checked").toArray();

      console.log(checkedCheckboxes);
    });
  </script>
</body>
</html>