jQueryでラジオボタンを思い通りに操る！選択状態の取得・設定方法

2024-05-19

jQuery でラジオボタングループから選択されたラジオボタンを値で設定する方法

prop() メソッドを使う

これは、ラジオボタンの checked プロパティを直接操作する方法です。

$('input[name="radioGroup"]').prop('checked', false); // すべてのラジオボタンのチェックを外す
$('input[name="radioGroup"][value="特定の値"]').prop('checked', true); // 特定の値を持つラジオボタンをチェック

filter() メソッドと val() メソッドを使う

この方法は、まず選択されたラジオボタンを filter() メソッドで探し出し、その後 val() メソッドでその値を取得して、別のラジオボタンに設定します。

const selectedValue = $('input[name="radioGroup"]:checked').val();
$('input[name="別のラジオグループ"]').val(selectedValue);

この方法は、ラジオボタングループ内のすべてのラジオボタンをループし、value プロパティと一致するラジオボタンを見つけたら checked プロパティを true に設定します。

$('input[name="radioGroup"]').each(function() {
  if ($(this).val() === '特定の値') {
    $(this).prop('checked', true);
    return false; // ループを終了
  }
});

補足:

上記の例では、name 属性が "radioGroup" のラジオボタングループを想定しています。必要に応じて属性名を変更してください。
複数のラジオボタンを同時に選択できるようにするには、multiple 属性をラジオボタングループの親要素に設定する必要があります。
ラジオボタンの選択状態を変更する際に、それに応じて他の処理を実行する必要がある場合は、change イベントを使用することができます。

これらの方法を参考に、状況に合った方法でラジオボタンの選択状態を設定してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ラジオボタンの選択状態を設定</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <h2>ラジオボタングループから選択されたラジオボタンを値で設定</h2>

  <p>ラジオボタングループ 1:</p>
  <input type="radio" name="radioGroup1" value="1" id="radio1">
  <label for="radio1">選択肢 1</label><br>
  <input type="radio" name="radioGroup1" value="2" id="radio2">
  <label for="radio2">選択肢 2</label><br>
  <input type="radio" name="radioGroup1" value="3" id="radio3">
  <label for="radio3">選択肢 3</label><br>

  <p>ラジオボタングループ 2:</p>
  <input type="radio" name="radioGroup2" value="" id="radio4">
  <label for="radio4">選択なし</label><br>

  <button id="setButton">設定</button>

  <script>
    $(document).ready(function() {
      $('#setButton').click(function() {
        // ラジオボタングループ 1 で選択されている値を取得
        const selectedValue = $('input[name="radioGroup1"]:checked').val();

        // ラジオボタングループ 2 で選択されている値をクリア
        $('input[name="radioGroup2"]').prop('checked', false);

        // ラジオボタングループ 2 で、選択された値を持つラジオボタンをチェック
        $('input[name="radioGroup2"][value="' + selectedValue + '"]').prop('checked', true);
      });
    });
  </script>
</body>
</html>

HTML で 2 つのラジオボタングループを作成します。
#setButton ボタンがクリックされたときに、以下の処理を実行します。
- ラジオボタングループ 1 で選択されている値を取得します。
- ラジオボタングループ 2 で、選択された値を持つラジオボタンをチェックします。

jQuery でラジオボタングループから選択されたラジオボタンを値で設定するその他の方法

この方法は、ラジオボタンの value 属性を直接設定する方法です。

$('input[name="radioGroup2"]').attr('value', selectedValue);

trigger('change') メソッドを使う

この方法は、ラジオボタンの change イベントをトリガーする方法です。これにより、ラジオボタンの選択状態が更新され、それに応じて他の処理が実行されます。

$('input[name="radioGroup2"][value="' + selectedValue + '"]').trigger('change');

それぞれの方法の比較:

方法	説明	利点	欠点
`prop()` メソッド	ラジオボタンの `checked` プロパティを直接操作	シンプルでわかりやすい	古いバージョンの jQuery では動作しない可能性がある
`filter()` メソッドと `val()` メソッド	選択されたラジオボタンを検索してから値を設定	柔軟性が高い	処理が少し複雑
`attr()` メソッド	ラジオボタンの `value` 属性を直接設定	シンプルでわかりやすい	ラジオボタンの選択状態が更新されない
`trigger('change')` メソッド	ラジオボタンの `change` イベントをトリガー	他の処理と容易に連携できる	イベントハンドラを別途定義する必要がある