如何验证是否选择了 3 个复选框？

Question

我目前正在使用以下jQuery validation engine.。我希望至少选择 3 个不同的复选框，并且 html 看起来像这样：

<fieldset class="group" id="tajirr_user_complete_registration_wanita">
           <legend><label class="required">Wanita</label></legend>
           <ul class="checkbox">
              <li><input type="checkbox" class="validate[minCheckbox[3], maxCheckbox[5]]" data-prompt-position="topLeft:0,-30" id="tajirr_user_complete_registration_wanita_0" name="tajirr_user_complete_registration[wanita][]" value="10"><label for="tajirr_user_complete_registration_wanita_0">Atasan &amp; Bawahan</label></li>
              <li><input type="checkbox" class="validate[minCheckbox[3], maxCheckbox[5]]" data-prompt-position="topLeft:0,-30" id="tajirr_user_complete_registration_wanita_1" name="tajirr_user_complete_registration[wanita][]" value="11"><label for="tajirr_user_complete_registration_wanita_1">Dress</label></li>
           </ul>
</fieldset>
<fieldset class="group" id="tajirr_user_complete_registration_pria">
       <legend><label class="required">Pria</label></legend>
       <ul class="checkbox">
          <li><input type="checkbox" class="validate[minCheckbox[3], maxCheckbox[5]]" data-prompt-position="topLeft:0,-30" id="tajirr_user_complete_registration_pria_0" name="tajirr_user_complete_registration[pria][]" value="19"><label for="tajirr_user_complete_registration_pria_0">Atasan &amp; Bawahan</label></li>
          <li><input type="checkbox" class="validate[minCheckbox[3], maxCheckbox[5]]" data-prompt-position="topLeft:0,-30" id="tajirr_user_complete_registration_pria_1" name="tajirr_user_complete_registration[pria][]" value="21"><label for="tajirr_user_complete_registration_pria_1">Sepatu</label></li>
          <li><input type="checkbox" class="validate[minCheckbox[3], maxCheckbox[5]]" data-prompt-position="topLeft:0,-30" id="tajirr_user_complete_registration_pria_2" name="tajirr_user_complete_registration[pria][]" value="22"><label for="tajirr_user_complete_registration_pria_2">Batik</label></li>
       </ul>
</fieldset>

我想在表单上进行验证，以便至少选择 3 个复选框。但是上述方法不起作用，因为minCheckbox 基于nameattribute 进行验证，这种形式有两个：tajirr_user_complete_registration[pria][]，另一个有tajirr_user_complete_registration[wanita][]。我可以更改名称以使其正常工作，但是它会破坏其他内容。我怎样才能做到这一点，以便它在整个表单中验证？

Answer 1

如果您希望至少检查 5 个中的 3 个，您可以这样做。无需验证： http://jsfiddle.net/nSgC8/

function check(){
var checked=0;
    $( "input:checkbox" ).each(function() {
        if($(this).is(':checked')){
        checked++;
        }
});
    if(checked>2){
    alert('Ok!');
    }
    else{
    alert('At least 3 checkboxes need to be selected!');
    }
}

Answer 2

您可以在<form> 的onsubmit 事件上使用类似的东西来代替验证器：

if ($("input:checked").length > 2)
    // Proceed
else
    // Alert

我使用了这个代码：

$(document).ready(function(){
    $("form").submit(function(){
        if ($("input:checked").length > 2)
            alert("Thanks for the answer!");
        else
            alert("Select min 3!!!");
        return false;
    });
});

小提琴：http://jsfiddle.net/praveenscience/SFF4P/

Answer 3

var checked_count = $('input:checkbox:checked').length;
alert(checked_count + " checkboxes are checked");