JavaScriptでチェックボックスグループの値を選択する方法

2024-04-03

jQueryを使用してチェックボックスグループの値を選択する方法

チェックボックスグループとは、複数のチェックボックスをまとめて選択できるグループです。多くの場合、フォームで使用されます。

jQueryを使用してチェックボックスグループの値を選択するには、いくつかの方法があります。

each() メソッドを使用して、チェックボックスグループ内の各チェックボックスをループ処理し、選択状態を設定できます。

// すべてのチェックボックスを選択
$("input[type='checkbox']").each(function() {
  $(this).prop("checked", true);
});

// 特定の値を持つチェックボックスを選択
$("input[type='checkbox'][value='特定の値']").each(function() {
  $(this).prop("checked", true);
});

filter() メソッドを使用して、特定の条件に合致するチェックボックスを選択できます。

// 特定のクラスを持つチェックボックスを選択
$("input[type='checkbox'].特定のクラス").prop("checked", true);

// 特定の値を持つチェックボックスを選択
$("input[type='checkbox'][value='特定の値']").prop("checked", true);

val() メソッドを使用して、チェックボックスグループの選択された値を取得できます。

// 選択された値を取得
var selectedValues = $("input[type='checkbox']:checked").val();

補足

上記の例は、基本的な方法を紹介しています。より複雑な処理を行う場合は、jQueryのドキュメントを参照してください。
jQueryを使用する前に、jQueryライブラリをプロジェクトに読み込む必要があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>チェックボックスグループの値を選択</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <form>
    <input type="button" value="すべて選択" onclick="selectAll()">

    <input type="button" value="特定の値を選択" onclick="selectSpecificValue()">

    <input type="button" value="選択された値を取得" onclick="getSelectedValues()">

    <br>

    <input type="checkbox" name="group" value="1"> 値 1
    <input type="checkbox" name="group" value="2"> 値 2
    <input type="checkbox" name="group" value="3"> 値 3
  </form>

  <script>
    // すべてのチェックボックスを選択
    function selectAll() {
      $("input[type='checkbox']").prop("checked", true);
    }

    // 特定の値を持つチェックボックスを選択
    function selectSpecificValue() {
      $("input[type='checkbox'][value='2']").prop("checked", true);
    }

    // 選択された値を取得
    function getSelectedValues() {
      var selectedValues = $("input[type='checkbox']:checked").val();
      alert(selectedValues);
    }
  </script>
</body>
</html>

このコードを保存し、ブラウザで開くと、以下のようになります。

すべて選択 ボタンをクリックすると、すべてのチェックボックスが選択されます。
選択された値を取得 ボタンをクリックすると、選択された値がアラートボックスに表示されます。

このコードを参考に、ニーズに合ったコードを作成してください。

チェックボックスグループの値を選択する他の方法

JavaScriptのネイティブメソッドを使用して、チェックボックスグループの値を選択できます。

// すべてのチェックボックスを選択
var checkboxes = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].checked = true;
}

// 特定の値を持つチェックボックスを選択
var checkbox = document.querySelector("input[type='checkbox'][value='特定の値']");
checkbox.checked = true;

// 選択された値を取得
var selectedValues = [];
var checkboxes = document.querySelectorAll("input[type='checkbox']:checked");
for (var i = 0; i < checkboxes.length; i++) {
  selectedValues.push(checkboxes[i].value);
}

フォームライブラリを使用する

Formライブラリを使用して、チェックボックスグループの値を選択できます。多くのFormライブラリは、チェックボックスグループの選択を簡単にするメソッドを提供しています。

例： Bootstrap: https://getbootstrap.com/

// すべてのチェックボックスを選択
$(".form-check-input").prop("checked", true);

// 特定の値を持つチェックボックスを選択
$(".form-check-input[value='特定の値']").prop("checked", true);

// 選択された値を取得
var selectedValues = [];
$(".form-check-input:checked").each(function() {
  selectedValues.push($(this).val());
});