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

how to validate if there are 3 checkbox selected?

本文关键字：3个 复选框 是否 何验证 验证      更新时间：2023-09-26

我目前正在使用以下jQuery验证引擎。。我想至少选择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基于name属性进行验证，这种形式有两个属性：tajirr_user_complete_registration[pria][]，另一个具有tajirr_user_complete_registration[wanita][]。我可以更改名称，这样它就可以正常工作，但它会破坏其他东西。如何使其在整个表单中都有效？

如果您希望至少检查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!');
    }
}

您可以在<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;
    });
});

Fiddle：http://jsfiddle.net/praveenscience/SFF4P/

var checked_count = $('input:checkbox:checked').length;
alert(checked_count + " checkboxes are checked");
相关文章：