JavaScript または jQuery を使用してラジオボタンをチェックする方法

ラジオボタンを選択するには、その checked プロパティを true に設定します。JavaScript では入力要素を id または value で検索でき、jQuery でも .prop('checked', true) を使って同じ操作ができます。ラジオボタングループでは name を共有するため、1つの入力をチェックすると、そのグループ内で選択されます。

以下のフォームには、後述の例で使う ID、グループ名、値が設定されています。

<form id="preferences">
  <label><input type="radio" id="myradio_1" name="radiobutton" value="1"> Option 1</label>
  <label><input type="radio" id="myradio_2" name="radiobutton" value="2"> Option 2</label>
  <label><input type="radio" id="myradio_3" name="radiobutton" value="3"> Option 3</label>
</form>

JavaScript でラジオボタンを選択する

ID が分かっている場合は、document.querySelector('#myradio_1').checked = true とすると、最初の入力が選択されます。# は ID セレクターを表し、.checked は現在の選択状態を示します。

このフォーム内で値を指定して選択するには、document.querySelector('#preferences input[name="radiobutton"][value="2"]').checked = true を使います。セレクターの対象をフォームとラジオボタングループに絞ることで、ページ内の無関係な入力要素に一致するのを防げます。対象を絞らずに値で検索する場合は、ドキュメント内で一致する入力要素の値が一意であるときに限り適切です。

次の独立した JavaScript の例は、ブラウザーの DOM を使わずにチェック状態をモデル化します。上記のブラウザー向けセレクターでは、実際の DOM API を使用します。

この例を実行します。

const radios = [
  { id: "myradio_1", value: "1", checked: false },
  { id: "myradio_2", value: "2", checked: false },
  { id: "myradio_3", value: "3", checked: false }
];

const chosenRadio = radios.find((radio) => radio.id === "myradio_1");
chosenRadio.checked = true;
console.log(radios.find((radio) => radio.checked).value);

1

jQuery でラジオボタンを選択する

これらの呼び出しを実行する前に、jQuery を読み込んでください。ID が分かっている入力には $('#myradio_1').prop('checked', true) を使います。値で選択する場合は、フォーム内に対象を絞って $('#preferences input[name="radiobutton"][value="2"]').prop('checked', true) とします。.prop() は現在のチェック状態を設定します。古い HTML 属性の値では、その後のユーザー操作による変更が正確に表されないことがあります。

ボタンのクリック時にラジオボタンを選択する

ボタンを追加し、そのクリックを JavaScript で処理します。フォームの外に置くボタンには type="button" を指定し、フォームが送信されないようにします。変更されていないこのブラウザーページ全体の例では、ボタンをクリックすると「Option 1」のラジオボタンが選択されます。画面に表示されるラベル「Option 1」とボタンのテキスト「Select Option 1」はどちらも英語のままです。これは静的なソース例であり、実行時の出力は示していません。

<form id="preferences">
  <label><input type="radio" id="myradio_1" name="radiobutton" value="1"> Option 1</label>
  <label><input type="radio" id="myradio_2" name="radiobutton" value="2"> Option 2</label>
  <label><input type="radio" id="myradio_3" name="radiobutton" value="3"> Option 3</label>
</form>
<button id="button_1" type="button">Select Option 1</button>
<script>
  document.querySelector('#button_1').addEventListener('click', () => {
    document.querySelector('#preferences input[value="1"]').checked = true;
  });
</script>