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

<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="submit">表示</button>
</form>
<p id="result"></p>

const button = document.getElementById("submit");
const result = document.getElementById("result");

button.addEventListener("click", () => {
  const selected = document.querySelector('input[name="options"]:checked');
  result.textContent = selected
    ? `選択：${selected.value}`
    : "選択されていません"; // 未選択なら null
});

const form = document.getElementById("myForm");

// チェック中のラジオの value を直接取得（未選択なら空文字 ""）
const value = form.elements.options.value;
// または form.elements["options"].value

console.log(value); // "Option 2" など

const form = document.getElementById("myForm");
const result = document.getElementById("result");

form.addEventListener("change", () => {
  result.textContent = `選択：${form.elements.options.value}`;
});

// 特定の値を選択状態にする
document.querySelector('input[name="options"][value="Option 2"]').checked = true;

// グループの選択をすべて解除する
document.querySelectorAll('input[name="options"]').forEach((el) => {
  el.checked = false;
});

// フォーム全体を初期状態に戻すなら
document.getElementById("myForm").reset();