如何从HTML dialog中获取单选按钮组的选中值？

首先你的代码里存在两个基础错误，先修正：

1. 所有单选框的vale属性拼写错误，正确属性名是value
2. <label>的for属性需要和对应<input>的id匹配，否则点击标签无法选中单选框

修正后的index.html #

<body>
  <dialog class="dialog">
    <form class="report__form" method="dialog">
      <div>
        <input type="radio" name="report" id="vulgar" value="vulgar" />
        <label for="vulgar">Vulgar/Offensive Language</label>
      </div>
      <div>
        <input type="radio" name="report" id="duplicate" value="duplicate" />
        <label for="duplicate">Duplicate</label>
      </div>
      <div>
        <input type="radio" name="report" id="broken" value="broken" />
        <label for="broken">Broken</label>
      </div>
      <button class="dialog__submit">Submit</button>
    </form>
  </dialog>
  <button class="open">open dialog</button>
  <script src="script.js"></script>
</body>

获取单选框值的两种实用方式 #

方式一：监听表单提交事件

在用户点击提交按钮时，直接在表单提交逻辑里获取选中值，还能做必填校验：

const dialog = document.querySelector(".dialog");
const reportForm = document.querySelector(".report__form");
const openButton = document.querySelector(".open");

openButton.addEventListener("click", () => {
  dialog.showModal();
});

reportForm.addEventListener("submit", (e) => {
  const selectedValue = document.querySelector('input[name="report"]:checked')?.value;
  if (selectedValue) {
    console.log("选中的举报类型：", selectedValue);
    // 这里添加你的业务逻辑，比如发送请求、存储数据等
  } else {
    alert("请选择一个举报类型");
    e.preventDefault(); // 未选中时阻止dialog关闭
  }
});

方式二：监听Dialog关闭事件

适合需要在Dialog关闭后统一处理数据的场景：

const dialog = document.querySelector(".dialog");
const openButton = document.querySelector(".open");

openButton.addEventListener("click", () => {
  dialog.showModal();
});

dialog.addEventListener("close", () => {
  const selectedValue = document.querySelector('input[name="report"]:checked')?.value;
  if (selectedValue) {
    console.log("选中的举报类型：", selectedValue);
    // 执行后续业务操作
  }
});

补充：设置默认选中项 #

如果需要默认选中某个单选框，给对应<input>添加checked属性即可：

<input type="radio" name="report" id="vulgar" value="vulgar" checked />

内容的提问来源于stack exchange，提问作者Brenden Baio