驗證當選擇了單選按鈕的一組下拉的Jquery的/ PHP

Question

我有6個單選按鈕

XS | S | M | L | XL | XXL | XXXL |自定義

下自定義單選按鈕我有幾個下拉（選擇）框像 褲腰|褲衩|褲子正面|褲子返回|褲長褲

下這些下拉是 褲腰 26 | 27 | 28 | 29 | 30 ....

我希望jQuery驗證是否單選按鈕被選中，否則錯誤消息，如果自定義按鈕被選中，那麼我需要驗證他們是否從所有的下拉（選擇）框中選擇，如果沒有，那麼錯誤消息。

我用這對woocommerce因此我的目標.single_add_to_cart_button點擊功能

jQuery(document).ready(function() { 
 
     jQuery('input[type="radio"]').click(function() { 
 
     if (jQuery(this).attr('id') == 'custom') { 
 
      jQuery('.custom-sizes').show('slow'); 
 
     } else { 
 
      jQuery('.custom-sizes').hide('slow'); 
 
     } 
 
     }); 
 
    
 
    }); 
 
    
 
    jQuery('.single_add_to_cart_button').click(function() { 
 
     if (jQuery('input[type="radio"]'.val() == 'custom').prop('checked')) 
 
    
 
     { 
 
     jQuery('.validate').each(function() { 
 
      if (jQuery(this).val() == 'select') { 
 
      jQuery('.customchecked-error').show(); 
 
      return false; 
 
      } else { 
 
      return true; 
 
      } 
 
    
 
     }); 
 
     } 
 
    
 
    });

.sizes { 
 
     margin: 20px auto; 
 
    } 
 
    
 
    .sizes input { 
 
     margin-right: 10px; 
 
    } 
 
    
 
    .sizes input[type=radio] { 
 
     display: none; 
 
     margin: 15px !important; 
 
     cursor: pointer !important; 
 
    } 
 
    
 
    .sizes input[type=radio] + label { 
 
     display: inline-block; 
 
     padding: 4px 12px; 
 
     background-color: #e7e7e7; 
 
     border-color: #ddd; 
 
     cursor: pointer !important; 
 
    } 
 
    
 
    .sizes input[type=radio]:checked + label { 
 
     background-image: none; 
 
     background-color: #000; 
 
     color: #fff; 
 
     transition: all 0.5s ease-out; 
 
     cursor: pointer !important; 
 
    } 
 
    
 
    .custom-sizes { 
 
     display: none; 
 
    } 
 
    
 
    .custom-sizes label { 
 
     font-size: 12px !important; 
 
     font-weight: 300 !important; 
 
    } 
 
    
 
    .custom-sizes .selections { 
 
     margin-bottom: 20px !important; 
 
    } 
 
    
 
    .custom-sizes select { 
 
     width: 100% !important; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
     <div class="sizes"> 
 
     <h4>Please Select a Size</h4> 
 
     <input class="checkcase" type="radio" id="xs" name="standard_size" value="xs"> 
 
     <label for="xs">XS</label> 
 
     <input class="checkcase" type="radio" id="s" name="standard_size" value="s"> 
 
     <label for="s">S</label> 
 
     <input class="checkcase" type="radio" id="m" name="standard_size" value="m"> 
 
     <label for="m">M</label> 
 
     <input class="checkcase" type="radio" id="l" name="standard_size" value="l"> 
 
     <label for="l">L</label> 
 
     <input class="checkcase" type="radio" id="xl" name="standard_size" value="xl"> 
 
     <label for="xl">XL</label> 
 
     <input class="checkcase" type="radio" id="xxl" name="standard_size" value="xxl"> 
 
     <label for="xxl">XXL</label> 
 
     <input class="checkcase" type="radio" id="xxxl" name="standard_size" value="xxxl"> 
 
     <label for="xxxl">XXXL</label> 
 
     <br> 
 
     <br> 
 
     <input class="checkcase" type="radio" id="custom" name="standard_size" value="custom"> 
 
     <label for="custom">Custom</label> 
 
    </div> 
 
    <div class="clear"></div> 
 
    <div class="custom-sizes"> 
 
     <p>Customize Your Look <a class="mpg-lightbox" href="/images/size-measure.jpg"><span> How to Measure</span></a></p> 
 
     <div class="custom-size-options"> 
 
     <div class="form-group"> 
 
      <div class="col-md-3 selections"> 
 
      <label>Waist<span class="show_required"> *</span></label> 
 
      <select class="pant_waist validate" name="pant_waist"> 
 
       <option value="select">Select</option> 
 
       <option value="24">24</option> 
 
       <option value="25">25</option> 
 
       <option value="26">26</option> 
 
      </select> 
 
      </div> 
 
      <div class="col-md-3 selections"> 
 
      <label>Hip<span class="show_required"> *</span></label> 
 
      <select class="pant_hip validate" name="pant_hip"> 
 
       <option value="select">Select</option> 
 
       <option value="30">30</option> 
 
       <option value="31">31</option> 
 
       <option value="32">32</option> 
 
      </select> 
 
      </div> 
 
      <div class="col-md-3 selections"> 
 
      <label>Front<span class="show_required"> *</span></label> 
 
      <select class="pant_front validate" name="pant_front"> 
 
       <option value="select">Select</option> 
 
       <option value="30">30</option> 
 
       <option value="31">31</option> 
 
       <option value="32">32</option> 
 
      </select> 
 
      </div> 
 
      <div class="col-md-3 selections"> 
 
      <label>Back<span class="show_required"> *</span></label> 
 
      <select class="pant_back validate" name="pant_back"> 
 
       <option value="select">Select</option> 
 
       <option value="30">30</option> 
 
       <option value="31">31</option> 
 
       <option value="32">32</option> 
 
      </select> 
 
      </div> 
 
      <div class="col-md-3 selections"> 
 
      <label>Inseam<span class="show_required"> *</span></label> 
 
      <select class="pant_inseam validate" name="pant_inseam"> 
 
       <option value="select">Select</option> 
 
       <option value="30">30</option> 
 
       <option value="31">31</option> 
 
       <option value="32">32</option> 
 
      </select> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    
 

這裏是小提琴鏈接 https://jsfiddle.net/b5wrrj4h/

感謝幫助！

Answer 1

而不是使用

if (jQuery('input[type="radio"]'.val() == 'custom').prop('checked')) 

使用按鈕的ID像這樣的：

if (jQuery('#custom').prop('checked')) 

這裏是它在行動小提琴：

https://jsfiddle.net/u0u86ug6/

編輯：

爲了驗證爲其他複選框，添加一個else語句代碼如下所示：

if (jQuery('#custom').prop('checked')) { 
... 
} else { 
    if (jQuery('.checkcase').prop('checked') == false) { 
    jQuery('.customchecked-error').show(); 
    } 
} 

這裏是一個小提琴：https://jsfiddle.net/hysxpjt8/