如何从 HTML 对话框中检索单选组的值？

Answer 1

首先，您需要为每个复选框提供一个

value

属性，而不是

vale

属性。从那里您可以在提交表单时选择

:checked

元素并根据需要进行处理。

另请注意，

for

元素中的

label

属性需要与复选框的

id

相匹配。由于您的复选框没有

id

，因此这不起作用。虽然您可以通过将复选框包装在

label

元素中来简化此操作，但这样您根本不需要包含

for

属性。

这是经过上述更改后的工作示例：

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 = reportForm.querySelector('input[type="radio"]:checked').value;
  console.log(selectedValue);
});

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