JavaScriptでラジオボタングループの値を取得する方法

1. getElementByIdを使用する方法: HTMLでラジオボタンを定義し、id属性を指定します。次に、JavaScriptでgetElementByIdメソッドを使用して要素を取得し、valueプロパティを使用して値を取得します。

<input type="radio" name="myRadioGroup" id="option1" value="Option 1"> Option 1
<input type="radio" name="myRadioGroup" id="option2" value="Option 2"> Option 2

var selectedOption = document.getElementById("option1").value;
console.log(selectedOption); // 選択された値をコンソールに出力

2. querySelectorを使用する方法: querySelectorメソッドを使用すると、CSSセレクタを使用して要素を取得できます。name属性を使用してグループを指定し、:checked擬似クラスを使用して選択された要素を取得します。

var selectedOption = document.querySelector('input[name="myRadioGroup"]:checked').value;
console.log(selectedOption); // 選択された値をコンソールに出力

3. フォーム要素を使用する方法: フォーム要素を取得し、elementsプロパティを使用してラジオボタングループの要素を取得します。その後、ループを使用して選択された要素を特定し、valueプロパティを使用して値を取得します。

<form id="myForm">
  <input type="radio" name="myRadioGroup" value="Option 1"> Option 1
  <input type="radio" name="myRadioGroup" value="Option 2"> Option 2
</form>

var form = document.getElementById("myForm");
var selectedOption;
for (var i = 0; i < form.elements.myRadioGroup.length; i++) {
  if (form.elements.myRadioGroup[i].checked) {
    selectedOption = form.elements.myRadioGroup[i].value;
    break;
  }
}
console.log(selectedOption); // 選択された値をコンソールに出力

これらの方法を使用すると、JavaScriptでラジオボタングループの値を取得することができます。適切な方法を選択し、フォーム処理などの応用に活用してください。