フォームの中でユーザーに選択肢を提供する際、ラジオボタンは非常に便利です。今回は、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’) を使用して、選択されたラジオボタンを取得します。
- 値の表示: 選択されたラジオボタンの値を取得し、それを画面に表示します。何も選択されていない場合には、「オプションが選択されていません」というメッセージを表示します。
サンプル
よくある質問（FAQ）
Q. JavaScriptでラジオボタンの値を取得するには？
A. querySelectorで:checkedセレクタを使います。例：document.querySelector(“input[name=group]:checked”)?.value。チェックがない場合はundefinedを返すため?.演算子が安全です。
Q. ラジオボタンの選択をJavaScriptで変更するには？
A. 対象のvalue属性を持つinput要素のcheckedをtrueにします。例：document.querySelector(“[name=group][value=opt2]”).checked = true。changeイベントは手動ではfireしないため必要なら別途dispatchEventしてください。
Q. ラジオボタングループの全選択をリセットするには？
A. querySelectorAll(“input[name=group]”)でグループ全体を取得し、forEach(el => el.checked = false)で全チェックを外します。
まとめ
JavaScriptを使えば、ラジオボタンで選択された値を簡単に取得して表示できます。フォーム処理やユーザーインタラクションの際に、ぜひ活用してみてください。
