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;
    }
}

问题

只有if语句才有效。
如果选中复选框，然后取消选中，则表单提交为true 提交。
不验证，不起作用。

我哪里错了？

谢谢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)) {
...

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

问题

HTML

1 个答案: