JavaScriptでのラジオボタンの操作

では、ラジオボタンを操作してみましょう。 これらは一連のスイッチのグループで、 そのうち1つだけを選択できます。 複数のラジオボタンを1つのグループにするには、 それらが同じ属性値を持つ必要があります name:

html<input type="radio" name="elem">
<input type="radio" name="elem">
<input type="radio" name="elem">

そしてJavaScriptでどのボタンが選択されたかを 判別するために、グループ内の各ラジオボタンに 異なる値を持つvalue属性を追加します:

html<input type="radio" name="elem" value="1">
<input type="radio" name="elem" value="2">
<input type="radio" name="elem" value="3">

デフォルトで選択済みのラジオボタンを作成するには、 属性checkedを設定する必要があります:

html<input type="radio" name="elem" value="1" checked>
<input type="radio" name="elem" value="2">
<input type="radio" name="elem" value="3">

実際にJavaScriptでこれらのボタンをどのように操作するか見てみましょう。 上記のようなラジオボタングループと、 通常のボタンがあるとします:

html<input type="submit" id="button">

ボタンをクリックしたときに、 現在選択されているラジオボタンの valueが画面に表示されるようにしましょう。

この課題を解決するには、すべてのラジオボタンを ループで処理し、どれが選択されているかを 判断する必要があります。 そのためには、処理する各ラジオボタンの checkedプロパティの値を読み取ります。 このプロパティがtrueに等しいボタンが 選択されています。

上記を実装してみましょう:

javascriptlet radios = document.querySelectorAll('input[type="radio"]');
let button = document.querySelector('#button');

button.addEventListener('click', function() {
  for (let radio of radios) {
    if (radio.checked) {
      console.log(radio.value);
    }
  }
});