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

How can I validate more than one checkbox on submission?

本文关键字：复选框 验证 提交      更新时间：2023-09-26

我有两组复选框，分别命名为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. 若语句有效，则仅限于第一个
  2. 如果选中复选框，然后在之前取消选中，则表单提交true提交
  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。是分段吗？我试图把每组复选框（底部、顶部）分成两个单独的部分，所以使用了这个标签。

有什么想法吗？

当您有多个具有相同名称的输入时，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)) {
...
相关文章：