Question

我有6个单选按钮

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

在自定义单选按钮下我有几个下拉（选择）框裤腰|裤子臀部|裤子前面|裤背|裤子Inseam

在这些下拉之下是类似的选项裤腰 26 | 27 | 28 | 29 | 30 ....

我希望jQuery验证单选按钮是否被选中，否则错误消息如果选择了自定义按钮，那么我需要验证他们是否已从所有下拉（选择）框中选择，如果没有，则错误消息。

我正在将它用于woocommerce，因此我必须针对.single_add_to_cart_button点击功能

＆＃13;

    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;
          }
    
        });
      }
    
    });

＆＃13;

  .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;
    }

＆＃13;

<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>

＆＃13;

这是小提琴链接 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/

选择单选按钮Jquery / PHP时，验证一组下拉列表

1 个答案: