我的 JavaScript 没有正确检查表单的无线电输入

Question

所以我正在尝试编写 javaScript 来检查我的表单。我有六个无线电类型的输入，其中一个 必须 进行检查。单选按钮放置在两排三个单选输入中。一行的名称为“inschrijving1”，另一行的其他三个输入的名称分别为“inschrijving2”。这是我用来检查表单的代码，但是使用此代码时，它总是返回 false 并且总是给出警报。

if(!document.getElementsByName("inschrijving1").checked || !document.getElementsByName("inschrijving2").checked)
{
     alert("Selecteer een dagdeel voor de inschrijving");
     return false;
}

谁能明白这是为什么？如果没有检查六个无线电输入，我只需要它返回 false 并发出警报。

Answer 1

因为getElementsByName() 返回一个元素集合/nodeList，它没有集合checked 属性。为此，您需要显式迭代返回的 每个 元素并单独检查它们。

假设每个name 中只有一个元素：

if(!document.getElementsByName("inschrijving1")[0].checked || !document.getElementsByName("inschrijving2")[0].checked)

或者，在兼容的浏览器中，每个都有多个：

if(!document.querySelector("name=['inschrijving1']:checked") || !document.getElementsByName("name=['inschrijving2']:checked"))

document.querySelector() 仅返回满足所提供选择器的 first 匹配（使用 CSS 选择器语法）元素。

参考资料：

• document.getElementsByName()。
• document.querySelector()。