Question

总jQuery n00b。我有以下（简化）表单，其中包含两个类别/组的复选框（省略所有其他输入）：

<form id="myForm" method="post">
    Category 1:
    <input type="checkbox" name="check1" id="check1" value="1" />
    <input type="checkbox" name="check2" id="check2" value="2" />
    ...
    Category 2:
    <input type="checkbox" name="check3" id="check3" value="3" />
    <input type="checkbox" name="check4" id="check4" value="4" />
    <input type="submit" />
</form>

如果在提交后，在类别1中未选中复选框或在类别2中未选中复选框，则我尝试抛出客户端验证错误。

再次，作为一个jQuery n00b，我看到了一些将错误抛到弹出框中的示例。但是，我想要的是在使用jquery.unobtrusive.validation设置的验证错误<div>中抛出错误（不记得确切的名称）。此外，名称都是不同的，这使我无法使用一些更简单的例子。

使用ASP.net MVC，我的模型中的复选框实际上是布尔值（在此实例中不能使用复选框列表）。因此，我会在我的@Html.Checkbox(m => m.Model.Check1)视图中实际拥有代码：.cshtml等等。我不相信这是相关的。但我可能是错的。

Answer 1

最简单的方法：

if ($('#check1,#check2').filter(':checked').length <= 0 || 
         $('#check3,#check4').filter(':checked').length <= 0) {
   // error message
}

你必须自己完成剩下的工作，因为你没有发布关于你如何验证这个表格的有用细节。

Answer 2

一种方法是将一个类提供给第一组复选框，例如category1，将另一个类提供给第二组，例如category2。然后你会做类似

的事情

$("#myForm").submit(function() {
    if ($(".category1:checked").length == 0 || $(".category2:checked").length == 0) {
        $("#errormessage").append("<p>You must check at least one checkbox in each category!</p>"); // Or however you want the validation error to be displayed
        return false;
    }
});

但重复性较小的是在每个组的复选框周围放置div或其他容器元素，然后为每个div提供自己的类或ID（因此您有一个.category1 div包含类别1中的所有复选框和一个包含类别2中所有复选框的.category2 div。然后你用$（“。category1：checked”）和$（“。category2：checked”）作为选择器。

两组复选框，如果在任一组中未选中至少一个复选框，如何抛出验证错误

2 个答案: