Question

我有一组4个复选框，所有复选框都有不同的名称，并且要求至少选中1个复选框。

我已将所有这些课程设置为'require-one'。

<html>
<head>
<script src="scripts/lib/jquery.js" type="text/javascript"></script>
<script src="scripts/jquery.validate.js" type="text/javascript"></script>

<script language="JavaScript" type="text/javascript">
 $(document).ready(function(){
    $("#itemForm").validate({

rules: { 
    check1: {  
        required : {  
            depends: function(element) {  
                $('.require-one:checked').size() == 0; 
            }  
        } 
    } 
}
    });
  });
</script>

</head>
<body>
<form name="itemForm" id="itemForm" method="post">
<input type="checkbox" name="check1" id="check1" class="require-one" value="1" />
<input type="checkbox" name="check2" id="check2" class="require-one" value="2" />
<input type="text" class="required" />
<input type="submit" />
</form>
</body>
</html>

如果您在'return'之前放入$('.require-one:checked').size() == 0;但是，现在我的问题是，如果选中了复选框＃1，错误消息将只会消失。如果选中Checkbox＃2，它将不会消失，但会提交。如果选中任何复选框，如何删除错误？

rules: { 
    'nameOfAnyCheckbox': {  
        required : {  
            depends: function(element) {  
              return $('.require-one:checked').size() == 0; 
            }  
        } 
    }

Answer 1

贾斯汀有正确的答案。这是一个扩展，它将所有复选框的错误报告合并为一条消息：

http://jsfiddle.net/twd8j0tu/

$.validator.addMethod('require-one', function (value) {
              return $('.require-one:checked').size() > 0; }, 'Please check at least one box.');

var checkboxes = $('.require-one');
var checkbox_names = $.map(checkboxes, function(e,i) { return $(e).attr("name")}).join(" ");

$("#itemForm").validate({
    groups: { checks: checkbox_names },
    errorPlacement: function(error, element) {
             if (element.attr("type") == "checkbox")
               error.insertAfter(checkboxes.last());
             else
               error.insertAfter(element);
    }         
});

（请注意，此代码在jquery.validate.js版本1.10.0之后似乎不起作用。您必须为以后的版本修改它）。

Answer 2

用火箭发射器打飞？

$('.require-one:checked').size() == 0;

使用它的名称在任何一个复选框上应用规则。要使表单有效，此复选框必须通过验证。要使此复选框有效，必须至少选中4个复选框中的一个。

$("#itemForm").validate({
rules: { 
    'check1': {  
        required: {
            depends: function(element) {
                return $('.require-one:checked').size() == 0;
            }
        } 
    } 
}
});

更新2：

http://jsfiddle.net/MkPtP/1/

Answer 3

我认为@Anurag走的是正确的道路。看看这个工作版......

http://jsfiddle.net/Y23ec/

同样的想法只是一种不同的方式。

<form name="itemForm" id="itemForm" method="post">
<input type="checkbox" name="check1" id="check1" class="require-one validate-checkbox-oneormore" value="1" />
<input type="checkbox" name="check2" id="check2" class="require-one validate-checkbox-oneormore" value="2" />
<input type="text" class="required" />
<input type="submit" />
</form>

jQuery(document).ready(function () {
    $.validator.addMethod('validate-checkbox-oneormore', function (value) {
        return $('.require-one:checked').size() != 0; }, 'need a value');

    jQuery('#itemForm').validate({});
});

jQuery Validation Plugin：验证具有不同名称的复选框

3 个答案: