問題與多個複選框

Question

免責聲明：我一直只使用jQuery約一週和HTML/CSS約兩週。

我有一個包含幾個複選框和各種文本輸入字段的表單。第一個複選框是#ship_to_billing。如果選中，則隱藏並取消字段集#shipping_info。如果未檢查，則字段集內的所有字段都必須具有某個值。因此，基本上必須檢查ship_to_billing複選框，或者必須填寫fieldset字段以便用戶提交表單，否則他們會收到警告，指示他們完成適當的區域。這一切都非常出色。但是，我只是在表單底部添加了一個額外的必需複選框，並且無法弄清楚如何將它合併到我當前的jQuery設置中。新的複選框是#age_verification。它需要獨立於表格上的任何其他輸入進行檢查。如果沒有，他們應該在繼續之前收到警報以檢查該框。爲最後一個複選框添加驗證後，沒有任何工作，它只是讓用戶提交表單而不填寫或檢查任何輸入。

也想知道如果這樣做會導致潛在的兩個警報同時彈出，如果他們嘗試提交表單而不填寫任何內容或者可能有更好的方法去。

注意HTML是一個表單中（表單行動= 「/車/添加」 方法= 「郵報」）

<a type="button" class="btn btn-primary" href="#product-options" data-toggle="modal">Buy This!</a>          
     <div class="modal hide fade" id="product-options">      
      <div class="modal-header center"> 
       <a class="close" data-dismiss="modal">x</a> 
        <h3>When, Where and How?</h3> 
      </div> 
      <div class="modal-body l-m"> 
      {% include 'datepicker' %} 
      <hr> 
      <input type="hidden" name="properties[ship_to_billing]" value="" />       
      <label for="ship_to_billing" style="max-width:335px;"> 
      <input id="ship_to_billing" type="checkbox" name="properties[Ship to Billing Address]" value="Yes" {% if properties.ship_to_billing %} checked="checked"{% endif %} /> 
      <font size=1>Check here to have items shipped to your billing address (collected during checkout). Otherwise please fill out the information below.</font> 
      </label><br />              
      <fieldset id="shipping_info"> 
      <label for="shipping_name">Name of Recipient:</label>  
      <input class="input-xlarge" type="text" id="shipping_name" placeholder="Name" name="properties[Recipient]" />      
      <label for="address_street">Shipping Address:</label> 
      <input class="input-xlarge" type="text" id="address_street" placeholder="Street Address" name="properties[Address]" /> 
      <input class="input-xlarge" type="text" id="address_city" placeholder="City" name="properties[City]" /> 
      <input class="input-medium" type="text" id="address_province" placeholder="State" name="properties[State]" /> 
      <input class="input-medium" type="text" id="address_zip" placeholder="Zip Code" name="properties[Zip]" />        
      </fieldset> 
      <p> 
      <label for="gift_msg">Gift Message : (optional)</label>         
      <textarea id="gift_msg" placeholder="Please type your message" name="properties[Gift Message]" rows="4" cols="45"></textarea> 
      </p> 
      <p> 
      <input type="hidden" name="properties[age_verified]" value="" />        
      <label for="age_verified" style="max-width:335px;"> 
      <input id="age_verification" type="checkbox" name="properties[Age Verified]" value="Yes" {% if properties.age_verified %} checked="checked"{% endif %} required="required" /> 
      <font size=1>This gift contains alcohol. By checking this box you certify you are 21yrs of age or older. An adult signature with ID will be required upon delivery.</font> 
      </label> 
      </p>        
     </div> 

    <div class="modal-footer"> 
     <div class="btn-group"> 
      <button href="#" class="btn" data-dismiss="modal">Cancel</button> 
      <button type="submit" class="btn btn-primary" onclick="return validateShipping();" id="addtocart">Add To Cart</button> 
     </div> 
     </div>    
    </div>  

然後jQuery的：

<script> 

// Hides shipping info fieldset if ship to billing is checked 
$(function(){ 
    $("#ship_to_billing").change(function(){   
     if ($(this).is(":checked")) 
      $("#shipping_info").hide(); 
     else 
      $("#shipping_info").show(); 
    }); 
}); 

    // Validates address fields are filled out unless ship to billing is checked... 
    function validateShipping() { 
     if (!$("#ship_to_billing").is(":checked")) {    
      var inputs = $("#shipping_info input"); 
      var ready = true; 
      inputs.each(function(){     
       if ($(this).val() == '') { 
        ready = false; 
        return false; 
      } 
     }); 
     if (!ready) { 
      alert("Please tell us where to send this. Either choose ship to Billing Address or fill out the Recipient Name and Shipping Address fields. Thanks!"); 
      return false; 
     } 
    } 
    return true; 
} 
    // This is where my trouble is 
    if (!$('#age_verified').is(':checked')) { 
     alert("Please check box to verify you are 21 years of age or older."); 
     return false; 
    } 
}); 

</script> 

Answer 1

將你的年齡if聲明到裏面的驗證功能，我想你想

#age_verification 

而不是

#age_verified 

FIddle

// Hides shipping info fieldset if ship to billing is checked 
$(function() { 
    $("#ship_to_billing").change(function() { 
     if ($(this).is(":checked")) $("#shipping_info").hide(); 
     else $("#shipping_info").show(); 
    }); 
}); 

// Validates address fields are filled out unless ship to billing is checked... 
function validateShipping() { 
    if (!$("#ship_to_billing").is(":checked")) { 
     var inputs = $("#shipping_info input"); 
     var ready = true; 
     inputs.each(function() { 
      if ($(this).val() == '') { 
       ready = false; 
       return false; 
      } 
     }); 
     if (!ready) { 
      alert("Please tell us where to send this. Either choose ship to Billing Address or fill out the Recipient Name and Shipping Address fields. Thanks!"); 
      return false; 
     } 
    } 
    // This is where my trouble is 
    if (!$('#age_verification').is(':checked')) { 
     alert("Please check box to verify you are 21 years of age or older."); 
     return false;  
    } 
return true; 
} 

Answer 2

這感覺就像第二部分關於你的第Require fieldset after checkbox checked ...;）

你接近，你只需要包括validateShipping函數內部驗證，在返回任何其他內容之前，將您的jQuery語句中的ID更新爲age_verification（如Sergio提到的）...類似於：

// Validates address fields are filled out unless ship to billing is checked... 
function validateShipping() { 
    // if this function returns false, none of the other code will execute... 
    if (!$('#age_verification').is(':checked')) { // updated..! 
     alert("Please check box to verify you are 21 years of age or older."); 
     return false; 
    } 

    if (!$("#ship_to_billing").is(":checked")) {    
     var inputs = $("#shipping_info input"); 
     var ready = true; 
     inputs.each(function(){     
      if ($(this).val() == '') { 
       ready = false; 
       return false; 
      } 
     }); 

     if (!ready) { 
      alert("Please tell us where to send this. Either choose ship to Billing Address or fill out the Recipient Name and Shipping Address fields. Thanks!"); 
      return false; 
     } 
    } 
    return true; 
} 

Answer 3

您的age_verified驗證超出了任何功能。它不應該在驗證功能中嗎？