Question

我正在构建一个页面，用户可以从一个类别中选择各种商品（牛奶/水果......）这是以表格形式完成的。

然后，我将它们发送到服务器并进行一些处理。

<div>
    <div><input type="checkbox" name="milk" value="yogurt1"/>yogurt1</div>
    <div><input type="checkbox" name="milk" value="yogurt2"/>yogurt2</div>
    <div><input type="checkbox" name="milk" value="yogurt3"/>yogurt3</div>
</div>              

<div>
    <div><input type="checkbox" name="fruit" value="apple"/>apple</div>
    <div><input type="checkbox" name="fruit" value="pear"/>pear</div>
    <div><input type="checkbox" name="fruit" value="melon"/>melon</div>
</div>  

....

问：如何验证用户是否从每个类别中选择了至少1个产品（即列表1的牛奶项目和至少1个水果项目已被选中）？

Answer 1

您可以将attribute selector与:checked伪选择器一起使用，如下所示：

if ($(':checkbox[name="milk"]:checked').length > 0) {
    alert('Min 1 checked');
}

对于多个群组：

if ($(':checkbox[name="milk"]:checked').length == 0 || $(':checkbox[name="fruit"]:checked').length == 0 || ...) {
    alert('Please check at least one checkbox from group');
}

Demo

Answer 2

您应该检查所选值的length。

＆＃13;

$("#check").on("click", function() {
  if ($("[name=\"milk\"]:checked").length > 0 && $("[name=\"fruit\"]:checked").length > 0) {
    alert("success");
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
  <div>
    <input type="checkbox" name="milk" value="yogurt1" />yogurt1</div>
  <div>
    <input type="checkbox" name="milk" value="yogurt2" />yogurt2</div>
  <div>
    <input type="checkbox" name="milk" value="yogurt3" />yogurt3</div>
</div>

<div>
  <div>
    <input type="checkbox" name="fruit" value="apple" />apple</div>
  <div>
    <input type="checkbox" name="fruit" value="pear" />pear</div>
  <div>
    <input type="checkbox" name="fruit" value="melon" />melon</div>
</div>
<div id="check">check</div>

＆＃13;

Answer 3

您可以创建一个可以处理任何名称的更动态的解决方案，而不是对验证中的每个复选框名称进行硬编码。

我建议的这个过程最好通过下面的代码片段演示中的评论来解释：

＆＃13;

// execute function on dom-ready
$(function(){
    // bind an event handler to the form's 'submit' event
    $('#myForm').on('submit', function(e){
        // get all checkboxes within our form
        var $checkboxes = $('#myForm input[type="checkbox"]');

        // create an object to use as a map of checkbox names and whether or not one of them is checked
        var checkboxMap = {};

        // iterate over all checkboxes
        $checkboxes.each(function(i, el){
            // get the name of this checkbox
            var name = el.name;
            // if our checkbox map has a truthy value at the key 'name'
            // then keep that value, otherwise assign a value based on whether or not this checkbox is checked
            checkboxMap[name] = checkboxMap[name] || el.checked;
        });

        // iterate over all names in our checkbox map
        for(var name in checkboxMap){
            // if we find a name without a truthy value, that means a there was no option chosen for that checkbox
            if(!checkboxMap[name]){
                // give an error alert and stop the form from being submitted
                alert('You must choose at least one ' + name);
                e.preventDefault();
                return false;
            }
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form id="myForm">
    <div>
        <div><input type="checkbox" name="milk" value="yogurt1"/>yogurt1</div>
        <div><input type="checkbox" name="milk" value="yogurt2"/>yogurt2</div>
        <div><input type="checkbox" name="milk" value="yogurt3"/>yogurt3</div>
    </div>              

    <div>
        <div><input type="checkbox" name="fruit" value="apple"/>apple</div>
        <div><input type="checkbox" name="fruit" value="pear"/>pear</div>
        <div><input type="checkbox" name="fruit" value="melon"/>melon</div>
    </div>  

    <input type="submit" />
</form>

＆＃13;

如何验证表单中是否检查了每组至少1个复选框？

3 个答案: