JSでラジオボタンがチェックされたらどうする？

JSでラジオボタンがチェックされたらどうなりますか？

Webページでユーザーに複数の選択肢から1つだけを選ばせる際によく使われるのがラジオボタンです。JavaScriptを使って、このラジオボタンがチェックされた時に何か処理を実行したい場合、どのようにすれば良いのでしょうか？

ラジオボタンのチェック状態の判定

JavaScriptで任意のラジオボタンがチェックされているか否かは、ラジオボタンを表す input 要素オブジェクトの checked プロパティで判定します。 checked は、ラジオボタンがチェックされていれば true を返し、チェックされていなければ false を返します。

コード例

<form>
  <label>
    <input type="radio" name="fruit" value="apple"> りんご
  </label>
  <label>
    <input type="radio" name="fruit" value="orange"> みかん
  </label>
  <label>
    <input type="radio" name="fruit" value="banana"> バナナ
  </label>
</form>

<script>
const appleRadio = document.querySelector('input[name="fruit"][value="apple"]');
if (appleRadio.checked) {
  console.log('りんごが選択されています');
} else {
  console.log('りんごは選択されていません');
}
</script>

上記の例では、まず document.querySelector() を使用して、name 属性が "fruit" で、value 属性が "apple" であるラジオボタン要素を取得しています。そして、取得した要素の checked プロパティを if 文で判定し、結果に応じて処理を分岐しています。

チェックされたラジオボタンの値の取得

チェックされたラジオボタンの値を取得するには、checked プロパティと value プロパティを組み合わせて使用します。

コード例

<form>
  <label>
    <input type="radio" name="color" value="red"> 赤
  </label>
  <label>
    <input type="radio" name="color" value="blue"> 青
  </label>
  <label>
    <input type="radio" name="color" value="green"> 緑
  </label>
</form>

<script>
const radios = document.querySelectorAll('input[name="color"]');
let selectedColor = '';

radios.forEach(radio => {
  if (radio.checked) {
    selectedColor = radio.value;
  }
});

console.log('選択された色:', selectedColor);
</script>

上記の例では、まず document.querySelectorAll() を使用して、name 属性が "color" であるすべてのラジオボタン要素を取得します。そして、forEach() メソッドで各ラジオボタンを順番に処理し、checked プロパティが true であるラジオボタンの value プロパティを取得して変数 selectedColor に格納しています。

ラジオボタンのイベント処理

ラジオボタンがチェックされたタイミングで何か処理を実行したい場合は、change イベントを使用します。

コード例

<form>
  <label>
    <input type="radio" name="size" value="small"> 小
  </label>
  <label>
    <input type="radio" name="size" value="medium"> 中
  </label>
  <label>
    <input type="radio" name="size" value="large"> 大
  </label>
</form>

<script>
const sizeRadios = document.querySelectorAll('input[name="size"]');

sizeRadios.forEach(radio => {
  radio.addEventListener('change', () => {
    const selectedSize = document.querySelector('input[name="size"]:checked').value;
    console.log('選択されたサイズ:', selectedSize);
  });
});
</script>

上記の例では、各ラジオボタンに change イベントリスナーを設定し、イベント発生時にチェックされたラジオボタンの値を取得してコンソールに出力しています。

まとめ

JavaScriptでラジオボタンを操作する方法について解説しました。 checked プロパティとイベント処理を組み合わせることで、Webページにインタラクティブな機能を追加することができます。

プロパティ/メソッド	説明
`checked`	ラジオボタンがチェックされているかどうかを判定する
`value`	ラジオボタンの値を取得する
`addEventListener('change', ...)`	ラジオボタンの値が変更されたときにイベントリスナーを設定する

JSでラジオボタンがチェックされたらどうする？

ラジオボタンのチェック状態の判定

コード例

チェックされたラジオボタンの値の取得

コード例

ラジオボタンのイベント処理

コード例

まとめ

参考資料

関連QA

Q1: ラジオボタンの初期状態を設定するにはどうすれば良いですか？

Q2: チェックされているラジオボタンをJavaScriptで変更するにはどうすれば良いですか？

Q3: ラジオボタンのスタイルをCSSで変更するにはどうすれば良いですか？