【JavaScript】ラジオボタンの値を取得・表示する方法

フォームの中でユーザーに選択肢を提供する際、ラジオボタンは非常に便利です。今回は、JavaScriptを使ってラジオボタンの選択された値を取得し、表示する方法を解説します。

HTMLのセットアップ

まずは、HTML内でラジオボタンのグループを用意します。以下のコードを参考に、3つのオプションを持つラジオボタンを設定します。

<form id="myForm">
  <label>
    <input type="radio" name="options" value="Option 1"> Option 1
  </label>
  <label>
    <input type="radio" name="options" value="Option 2"> Option 2
  </label>
  <label>
    <input type="radio" name="options" value="Option 3"> Option 3
  </label>
  <button type="button" id="submitBtn">選択したオプションを表示</button>
</form>

<p id="result"></p>

JavaScriptでラジオボタンの値を取得する

次に、JavaScriptを使って選択されたラジオボタンの値を取得し、その値を表示するスクリプトを記述します。

document.getElementById('submitBtn').addEventListener('click', function() {
  // ラジオボタンの選択された値を取得
  const selectedOption = document.querySelector('input[name="options"]:checked');
  
  // 値が取得できたか確認して表示
  if (selectedOption) {
    document.getElementById('result').textContent = '選択されたオプション: ' + selectedOption.value;
  } else {
    document.getElementById('result').textContent = 'オプションが選択されていません';
  }
});

スクリプトの解説

ここでは、JavaScriptを使ってラジオボタンの選択された値を取得し、表示するための手順を解説します。

• イベントリスナーの設定: 「選択したオプションを表示」ボタンがクリックされたときに実行されるイベントリスナーを設定します。
• ラジオボタンの取得: document.querySelector(‘input[name=”options”]:checked’) を使用して、選択されたラジオボタンを取得します。
• 値の表示: 選択されたラジオボタンの値を取得し、それを画面に表示します。何も選択されていない場合には、「オプションが選択されていません」というメッセージを表示します。

サンプル

まとめ

JavaScriptを使えば、ラジオボタンで選択された値を簡単に取得して表示できます。フォーム処理やユーザーインタラクションの際に、ぜひ活用してみてください。