檢查是否至少有一個複選框被選中

Question

我需要驗證以確定在將數據發送到表單發送腳本之前是否至少檢查了一個複選框。 這是我迄今（驗證底部各領域的複選框之一）

$('form#ajax_form .submit').click(function() { 
    $('#ajax_form .error').hide(); //if error visibile, hide on new click 
    var name = $('input#name').val(); 
    if (name == "" || name == " " || name == "Name") { 
     $('input#name').focus().before('<div class="error">Hey, what´s your name...?</div>'); 
     return false; 
    } 
    var email_test = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/; 
    var email = $('input#email').val(); 
    if (email == "" || email == " ") { 
     $('input#email').focus().before('<div class="error">Psssst. You missed one...</div>'); 
     return false; 
    } else if (!email_test.test(email)) { 
     $('input#email').select().before('<div class="error">Please recheck your email</div>'); 
     return false; 
    } 
    var message = $('#message').val(); 
    if (message == "" || message == " " || message == "Message") { 
     $('#message').focus().fadeIn('slow').before('<div class="error">Remember your message!</div>'); 
     return false; 
    } 
    if ($("[name=Field]:checked").length > 0) { 
     $('#services1').focus().after('<div class="error">Choose at least one please.</div>'); 
     return false; 
    } 
    var company = $('input#company').val(); 
    $.post(rootUrl + '/wp-admin/admin-ajax.php', { 
     action: "two2_send_contact_form", 
     email: email, 
     name: name, 
     message: message, 
     company: company 
    }, function (data) { 
     $('form#ajax_form').slideUp('fast').before('<div id="success"></div>'); 
     $('#success').html(data).slideDown(9000); 
    }); 

和複選框。

<div style="display:inline;"> 
    <span> 
     <label class="choice" for="Field1" style="display:inline;margin-left:0px;margin-right:5px;"> 
     <input id="Field1" name="Field[]" type="checkbox" class="field checkbox" value="Web Design" style="width:0px;">Web Design  
</label> 
    </span> 
    <span> 
     <label class="choice" for="Field2" style="display:inline;margin-left:0px;margin-right:5px;"> 
     <input id="Field2" name="Field[]" type="checkbox" class="field checkbox" value="Graphic Design" style="width:0px;">Graphic Design 
</label> 
    </span> 
    <span> 
     <label class="choice" for="Field3" style="display:inline;margin-left:0px;margin-right:5px;"> 
     <input id="Field3" name="Field[]" class="field checkbox" type="checkbox" value="Illustration" style="width:0px;">Illustration 
</label> 
    </span> 
    <span> 
     <label class="choice" for="Field4" style="display:inline;margin-left:0px;margin-right:5px;"> 
     <input id="Field4" name="Field[]" type="checkbox" class="field checkbox" value="Identity Dev/Branding" style="width:0px;">Identity Dev/Branding 
</label> 
    </span> 
    <br> 
    <span> 
     <label class="choice" for="Field1_3" style="display:inline;margin-left:0px;margin-right:5px;"> 
     <input id="Field5" name="Field[]" class="field checkbox" type="checkbox" value="Identity Dev/Branding" style="width:0px;">Web App Development 
</label> 
    </span> 
    <span> 
     <label class="choice" for="Field1_4" style="display:inline;margin-left:0px;margin-right:5px;"> 
     <input id="Field6" name="Field[]" class="field checkbox" type="checkbox" value="CGI" style="width:0px;">CGI 
</label> 
    </span> 
    <span> 
     <label class="choice" for="Field1_5" style="display:inline;margin-left:0px;margin-right:5px;"> 
     <input id="Field7" name="Field[]" class="field checkbox" type="checkbox" value="VFX" style="width:0px;">VFX 
</label> 
    </span> 
    <span> 
     <label class="choice" for="Field1_6" style="display:inline;margin-left:0px;margin-right:5px;"> 
     <input id="Field8" name="Field[]" class="field checkbox" type="checkbox" value="Video Production" style="width:0px;">Video Production 
</label> 
    </span> 
    <span> 
     <label class="choice" for="Field1_7" style="display:inline;margin-left:0px;margin-right:5px;"> 
     <input id="Field9" name="Field[]" class="field checkbox" type="checkbox" value="Motion Project" style="width:0px;">Motion Project 
</label> 
    </span> 
    </div> 

Answer 1

$('input[type="checkbox"]:is("checked")').length > 0 

至少一個複選框是選中

與jQuery> 1.7，你可以撥打

$('input:checked').length 

Answer 2

變化：

if ($("[name=Field]:checked").length > 0) { 

要：

if ($("[name='Field[]']:checked").length > 0) { 

您所有的複選框的名稱屬性中都有方括號name="Field[]"，但是您試圖在沒有方括號的情況下選中它們作爲name=Field。

Answer 3

這取決於你想如何實現這一點。如果你只是想確保至少有一個複選框，在各組被選中那麼這應該足夠：

if ($('input[type=checkbox]:checked').length) { 
    // at least one is checked do something 
} 

如果要檢查是否每個組被選中則至少有一個稍微複雜一些。下面是我創建的回答另一個問題，前一陣子小提琴，這可能有助於：http://jsfiddle.net/elclanrs/GFCKA/

在任何情況下，你有更多的驗證要素和投入工作，我建議你看一看this plugin，它可以幫助你與其他的東西。