javascript - 如何在提交时验证多个复选框？

Question

我有两组复选框，名为 pizzaBase 和 pizzaTopping。我想验证我的表格，以便在提交时必须至少选择 1 个基础和顶部。

function main() {
    var form = document.getElementById('formname');
    form.addEventListener('submit', validate);
}

function validate(event) {
    var form = document.getElementById('formname');
    if(!form.pizzaBase.checked) {
        alert("select a base");
        event.preventDefault();
    }
    else if(!form.pizzaTopping.checked) {
        alert("select topping");
        event.preventDefault();
    }
    else {
        return true;
    }
}

问题

1. 只有第一个 if 语句有效。
2. 如果复选框被选中然后取消选中，则表单提交为真 提交。
3. 不验证，不工作。

我哪里错了？

谢谢 GG 指出 JS 可以正常工作，如果有人不介意纠正我的话，我在下面有 HTML。我基本上有以下代码的两个相同版本，一个用于基础，另一个用于浇头。

**

HTML

**

 <section>
        <h2> Bases </h2>
                <p><input type="checkbox" name="pizzaBase" data-price="1.00" data-human-desc = "Small" value="Small"> Small   (£1.00) </p>
                <p><input type="checkbox" name="pizzaBase"data-price="1.50" data-human-desc = "Medium" value="Medium">  Medium   (£1.50) </p>
                <p><input type="checkbox" name="pizzaBase" data-price="2.50" data-human-desc = "Large"value="Large">  Large   (£2.50) </p>
                <p><input type="checkbox" name="pizzaBase" data-price="3.50" data-human-desc = "XLarge"value="XLarge">  XLarge   (£3.50) </p>
                </section>

不确定我是否应该在这里问一个单独的问题，但这是我困惑的 HTML。是分区吗？我试图将每组复选框(底料、浇头)分成两个单独的部分，因此使用了这个标签。

有什么想法吗？

Answer 1

当您有多个同名输入时，form.elementName 将是一个类似数组的元素列表。

该列表将没有 checked 属性。其中的每个项目都会。

您需要遍历列表并检查是否检查了任何元素。

function areAnyChecked(list) {
    for (var i = 0; i < list.length; i++) {
        if (list[i].checked) { 
            return true;
        }
    }
    return false;
}

if(! areAnyChecked(form.pizzaBase)) {
...