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

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', ...) ラジオボタンの値が変更されたときにイベントリスナーを設定する

参考資料

関連QA

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

A1: HTMLの checked 属性を使用します。<input type="radio" name="example" value="value1" checked> のように記述することで、ページ読み込み時に該当のラジオボタンが選択された状態になります。

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

A2: ラジオボタン要素の checked プロパティに true を設定することで、該当のラジオボタンをチェック状態にできます。 document.querySelector('input[name="example"][value="value2"]').checked = true; のように記述します。

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

A3: ラジオボタン自体はスタイル変更が難しいですが、隣接するラベル要素をターゲットにすることで見た目を変更できます。例えば、input[type="radio"]:checked + label { color: red; } のように記述することで、チェックされたラジオボタンのラベルの文字色を赤に変更できます。

その他の参考記事:jquery checkbox 外す