使用 Jquery 脚本验证复选框答案

【问题标题】：Checkbox Validation with Jquery Script使用 Jquery 脚本验证复选框
【发布时间】：2011-12-28 20:21:40
【问题描述】：

如何使用此验证脚本验证复选框？我尝试了许多不同的方法都无济于事。这是一个验证脚本，位于我为我的目的而修改的联系表单上，但无法弄清楚如何使用它来验证复选框。这是我的表单和验证代码。

    <form id="contactForm" action="send-mail.php" method="post">
    <table width="492">
      <tr>
    <th><label>Title:</label></th>
         <td><input name="title"  id="title" type="text" class="form-poshytip" title="Enter your first name" /></td>
            </tr>
      <tr>
    <th><label>Name:</label></th>
         <td><input name="name"  id="name" type="text" class="form-poshytip" title="Enter your first name" /></td>
            </tr>
                <tr>
                   <th><label>Email:</label></th>
                     <td><input name="email"  id="email" type="text" class="form-poshytip" title="Enter your email" /></td>                                 </tr>                               
                    <tr>
                    <th><label>Company:</label></th>
                    <td><input name="company"  id="company" type="text" class="form-poshytip" title="Enter your company" /></td>
                    </tr>
                     <tr>
                    <th><label>Phone: (with area code)</label></th>
                    <td><input name="phone"  id="phone" type="text" class="form-poshytip" title="Enter your phone" /></td>
                    </tr>
                    <tr>
                    <th><label>Fax:</label></th>
                    <td><input name="fax"  id="fax" type="text" class="form-poshytip" title="Enter your fax" /></td>
                    </tr>
                     <tr>
                    <th><label>Street:</label></th>
                     <td><input name="street"  id="street" type="text" class="form-poshytip" title="Enter your first name" /></td>
                     </tr>
                      <th><label>City:</label></th>
                     <td><input name="city"  id="city" type="text" class="form-poshytip" title="Enter your city" /></td>
                     </tr>
                      <th><label>State:</label></th>
                     <td><input name="state"  id="state" type="text" class="form-poshytip" title="Enter your state " /></td>
                     </tr>
                      <th><label>Zip:</label></th>
                     <td><input name="zip"  id="zip" type="text" class="form-poshytip" title="Enter your first name" /></td>
                     </tr>
                     <tr>
                    <th colspan="2"><label>Message:</label></th>
                    </tr>
                    <tr>
                    <th></th>
                    <td><textarea  name="comments"  id="comments" rows="5" cols="20" class="form-poshytip" title="Enter your comments"></textarea></td>
                    </tr>
                           <tr>
                    <th colspan="2"><label>Please Choose:</label></th>
                    </tr>
                     <tr>
                     <td><p>
                       <label>
                          <input  style="width:10%;" type="checkbox" name="checkbox[]" value="Initial Free Consultation" id="CheckboxGroup1"  class="options"/>
                       Initial Free Consultation</label>
                       <br />
                       <label>
                         <input style="width:10%;"  type="checkbox" name="checkbox[]" value=" Internal or External Audit" id="CheckboxGroup2" class="options"/>
                       Internal or External Audit</label>
                       <br />
                       <label>
                         <input style="width:10%;"  type="checkbox" name="checkbox[]" value="Security / Compliance Consulting" id="CheckboxGroup3" class="options"/>
                       Security / Compliance Consulting</label>
                       <br />
                       <label>
                         <input style="width:10%;" type="checkbox" name="checkbox[]" value="Risk Assessment" id="CheckboxGroup4" class="options"/>
                       Risk Assessment</label>
                       <br />
                       <label>
                         <input style="width:10%;" type="checkbox" name="checkbox[]" value="Compliance Readiness" id="CheckboxGroup5" class="options"/>
                       Compliance Readiness</label>
                       <br />
                     </p></td> 
                    <td><p>
                      <label>
                        <input style="width:10%;" type="checkbox" name="checkbox[]" value=" Risk Mitigation" id="CheckboxGroup6" class="options"/>
                        Risk Mitigation</label>
                      <br />
                      <label>
                        <input style="width:10%;" type="checkbox" name="checkbox[]" value="Technical Staffing" id="CheckboxGroup7" class="options" />
                        Technical Staffing</label>
                      <br />
                      <label>
                        <input style="width:10%;"  type="checkbox" name="checkbox[]" value="Pen Testing" id="CheckboxGroup8" class="options"/>
                        Pen Testing</label>
                      <br />
                      <label>
                        <input style="width:10%;"  type="checkbox" name="checkbox[]" value="Compliance Products" id="CheckboxGroup9" class="options"/>
                        Compliance Products</label>
                      <br />
                      <label>
                        <input style="width:10%;" type="checkbox" name="checkbox[]" value="Other" id="CheckboxGroup10" class="options"/>
                        Other</label>
                      <br />
                      </p></td>
                    </tr>
                    <tr>
                    <td><input style="position:relative; z-index:100;" type="submit" value="Submit" name="submit" id="submit" /></td>
                    </tr>
                     </table>
                     <input type="hidden" value="jfhepperle@gmail.com" name="to" id="to" />
                                <input type="hidden" value="" name="from" id="from" />
                                <input type="hidden" value="" name="subject" id="subject" />
                                <input type="hidden" value="" name="sendMailUrl" id="sendMailUrl" />
                        <p id="error" style="position class="warning">Message</p>
                        </form>
                        <p id="success" class="success">Thanks for your comments.</p>

jQuery

 jQuery(document).ready(function($) {

// hide messages 
$("#error").hide();
$("#success").hide();

// on submit...
$("#contactForm #submit").click(function() {
    $("#error").hide();

    //required:

        var title = $("input#title").val();
    if(title == ""){
        $("#error").fadeIn().text("Title required.");
        $("input#title").focus();
        return false;
    }

    //name
    var name = $("input#name").val();
    if(name == ""){
        $("#error").fadeIn().text("Name required.");
        $("input#name").focus();
        return false;
    }

        //email
    var email = $("input#email").val();
    if(email == ""){
        $("#error").fadeIn().text("Email required.");
        $("input#email").focus();
        return false;
    }


    var company = $("input#company").val();
    if(company == ""){
        $("#error").fadeIn().text("Company required.");
        $("input#company").focus();
        return false;
    }

    // phone
    var phone = $("input#phone").val();
    if(phone == ""){
        $("#error").fadeIn().text("Phone required");
        $("input#phone").focus();
        return false;
    }

        //fax
    var fax = $("input#fax").val();
    if(fax == ""){
        $("#error").fadeIn().text("Fax required.");
        $("input#fax").focus();
        return false;
    }

    var street = $("input#street").val();
    if(street == ""){
        $("#error").fadeIn().text("Street required.");
        $("input#street").focus();
        return false;
    }

    var city = $("input#city").val();
    if(city == ""){
        $("#error").fadeIn().text("City required.");
        $("input#city").focus();
        return false;
    }

    var state = $("input#state").val();
    if(state == ""){
        $("#error").fadeIn().text("State required.");
        $("input#state").focus();
        return false;
    }

    var zip = $("input#zip").val();
    if(zip == ""){
        $("#error").fadeIn().text("Zip code required.");
        $("input#zip").focus();
        return false;
    }

    // comments
    var comments = $("#comments").val();

    // send mail php
    var sendMailUrl = $("#sendMailUrl").val();

    //to, from & subject
    var to = $("#to").val();
    var from = $("#from").val();
    var subject = $("#subject").val();

    // data string
    var dataString = 'title='+ title
                    + '&name=' + name                        
                    + '&email=' + email
                    + '&company=' + company 
                    + '&phone=' + phone 
                    + '&fax=' + fax
                    + '&street=' + street 
                    + '&city=' + city 
                    + '&state=' + state
                    + '&zip=' + zip 
                    + '&comments=' + comments
                    + '&to=' + to
                    + '&from=' + from
                    + '&subject=' + subject;                                 
    // ajax
    $.ajax({
        type:"POST",
        url: sendMailUrl,
        data: dataString,
        success: success()
    });
});  


// on success...
 function success(){
    $("#success").fadeIn();
    $("#contactForm").fadeOut();
 }

return false;

});

【问题讨论】：

请更具体地说明您的问题，并考虑创建jsFiddle，以便我们更轻松地诊断您的代码。
您究竟需要验证什么？如果至少选中了 1 个复选框，或者选中了超过 1 个复选框？除了使用错误的选择器之外，您甚至没有 #error 和 #success div。
我一辈子都想不通如何将复选框验证添加到上述 jquery 表单验证中
至少需要勾选一个复选框。
if ($('input[type=checkbox]:checked').length() == 0) {alert('Please select at least one checkbox'); return false;}

标签： jquery validation checkbox

【解决方案1】：

仅选中一个复选框：

if (!$('input[name="checkbox[]"]').is(':checked')) {
    $("#error").fadeIn().text("You must check at least one option.");

    return false;
}

正如 .is() 的 jQuery 文档所说：

Description: Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.

祝你好运；）

【讨论】：

我很高兴它成功了 :) 请，如果您将此答案标记为正确的答案，我会很高兴，然后 ;)