javascript - 在 HTML 中至少选择一个选项

Question

情况:我想创建一个简单的代码，用户必须至少选择一个扩展才能继续。用户应至少选择 1 个或多个分机，否则将出现警告消息。

问题:问题是，如果只有 1 个分机可供选择，无论是否选择，都会出现警告消息，不允许完成注册。

//Select atleast one extension 
 var arrCheckboxes = document.checkForm.elements["product"];
    var checkCount = 0;
    for (var i = 0; i < arrCheckboxes.length; i++) {
        checkCount += (arrCheckboxes[i].checked) ? 1 : 0;
    }
    if (checkCount > 0){
        return true;
    } else {
        alert("Select at least one Extension.");
        return false;
    }

Answer 1

这是浏览器早期的遗留问题，如果只有一个名为 product 的表单控件，那么:

document.checkForm.elements["product"]; 

将返回对该控件的引用，而不是您期望的集合。默认情况下，此类控件没有 length 属性，因此:

arrCheckboxes.length

返回未定义和

i < arrCheckboxes.length

为 false，因此永远不会进入循环。

要解决这个问题，请使用querySelectorAll，它总是返回一个集合:

var arrCheckboxes = document.checkForm.querySelectorAll('[name=product]');

在 IE 8+ 和其他任何地方都受支持。代码的更简单版本(假设它位于函数体内):

var arrCheckboxes = document.checkForm.querySelectorAll('[name=product]');

for (var i = 0; i < arrCheckboxes.length; i++) {
    if (arrCheckboxes[i].checked) return true;
}
alert("Select at least one Extension.");
return false;