jquery 尝试将单选按钮放入单选按钮中

基本上，我在关注我的这篇文章，如果我必须显示单选按钮和其中的和显示div，以下解决方案可以正常工作：

$(".tier1-options :radio").on("change", function (e) {
  //remove shown class from all tier2 options and clear values from all form elements inside it
  $('.tier2-options')
    .removeClass('shown')
    .find('input, select').val('')
  
  //show the related tier2 options
  $(this)
    .parents('.tier1-options')
    .find('.tier2-options')
    .addClass('shown')
});

.tier2-options {
  display: none;
  margin-left: 1rem;
  padding: 1rem;
  background-color: #EEE;
}

.shown{
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h5>Select one of the checkboxes:</h5>

<div class='tier1-options'>
  <label>
    <input name="useroption" type="radio" value="changeLocation">
    Change Location
  </label>

  <div class="tier2-options">
    <select name="availableMarkAsFullLocations">
      <option value="-">--Please Select--</option>
      <option value="3">BOX#3</option>
      <option value="6">FREEZER#1</option>
      <option value="8">FREEZER#2</option>
      <option value="19">BOX#9</option>
      <option value="20">QBUILDING</option>
    </select>
  </div>
</div>

<div class="tier1-options">
  <label>
    <input name="useroption" type="radio" value="updateLocation">
    Update Location
  </label>

  <div class="tier2-options">
    <select name="availableUpdateLocations">
      <option value="-">--Please Select--</option>
      <option value="3">BOX#3</option>
      <option value="6">FREEZER#1</option>
      <option value="8">FREEZER#2</option>
      <option value="19">BOX#9</option>
    </select>
  </div>
</div>

<div class="tier1-options">
  <label>
    <input name="useroption" type="radio" value="retireLocation">
    Retire
  </label>

  <div class="tier2-options">
    <select name="availableRetireLocations">
       <option value="-">--Please Select--</option>
       <option value="3">BOX#3</option>
       <option value="6">FREEZER#1</option>
       <option value="8">FREEZER#2</option>
       <option value="19">BOX#9</option>
       <option value="20">QBUILDING</option>
    </select>
  </div>
</div>

但是当我尝试添加多个单选按钮时，此代码不适用于Move Contents选项。基本上，当我单击Tier I Move或Tier II Move时，subtier2-options不会显示

$(".tier1-options :radio").on("change", function (e) {
      //remove shown class from all tier2 options and clear values from all form elements inside it
      $('.tier2-options')
        .removeClass('shown')
        .find('input, select').val('')
      
      //show the related tier2 options
      $(this)
        .parents('.tier1-options')
        .find('.tier2-options')
        .addClass('shown')
    });
    
    $(".subtier1-options :radio").on("change", function (e) {
      //remove shown class from all tier2 options and clear values from all form elements inside it
      $('.subtier2-options')
        .removeClass('shown')
        .find('input, select').val('')
      
      //show the related tier2 options
      $(this)
        .parents('.subtier1-options')
        .find('.subtier2-options')
        .addClass('shown')
    });

.tier2-options {
      display: none;
      margin-left: 1rem;
      padding: 1rem;
      background-color: #EEE;
    }

    .shown{
      display: block;
    }
    
    .subtier2-options {
      display: none;
      margin-left: 1rem;
      padding: 1rem;
      background-color: #EEE;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <h5>Select one of the checkboxes:</h5>

    <div class='tier1-options'>
      <label>
        <input name="useroption" type="radio" value="changeLocation">
        Change Location
      </label>

      <div class="tier2-options">
        <select name="availableMarkAsFullLocations">
          <option value="-">--Please Select--</option>
          <option value="3">BOX#3</option>
          <option value="6">FREEZER#1</option>
          <option value="8">FREEZER#2</option>
          <option value="19">BOX#9</option>
          <option value="20">QBUILDING</option>
        </select>
      </div>
    </div>

    <div class="tier1-options">
      <label>
        <input name="useroption" type="radio" value="updateLocation">
        Update Location
      </label>

      <div class="tier2-options">
        <select name="availableUpdateLocations">
          <option value="-">--Please Select--</option>
          <option value="3">BOX#3</option>
          <option value="6">FREEZER#1</option>
          <option value="8">FREEZER#2</option>
          <option value="19">BOX#9</option>
        </select>
      </div>
    </div>

    <div class="tier1-options">
      <label>
        <input name="useroption" type="radio" value="retireLocation">
        Retire
      </label>

      <div class="tier2-options">
        <select name="availableRetireLocations">
           <option value="-">--Please Select--</option>
           <option value="3">BOX#3</option>
           <option value="6">FREEZER#1</option>
           <option value="8">FREEZER#2</option>
           <option value="19">BOX#9</option>
           <option value="20">QBUILDING</option>
        </select>
      </div>
    </div>

    <div class='tier1-options'>
      <label>
        <input name="useroption" type="radio" value="moveContents">
        Move Contents
      </label>

        <div class="tier2-options">
             <div class='subtier1-options'>
                 <label>
                  <input name="useroption" type="radio" value="moveContentsTierI">
                  Tier I move
                </label>

                 <div class="subtier2-options">
                     <select name="availableTierILocations">
                     <option value="-">--Please Select--</option>
                     <option value="3">BOX#3</option>
                     <option value="6">FREEZER#1</option>
                     <option value="8">FREEZER#2</option>
                     <option value="19">BOX#9</option>
                     <option value="20">QBUILDING</option>
                  </select>
                 
                 </div>
                
             
             </div> <!--end of <div class='subtier1-options'> -->
             
             <div class='subtier1-options'>
                 <label>
                  <input name="useroption" type="radio" value="moveContentsTierII">
                  Tier II move
                </label>

                 <div class="subtier2-options">
                     <select name="availableTierIILocations">
                     <option value="-">--Please Select--</option>
                     <option value="3">BOX#3</option>
                     <option value="6">FREEZER#1</option>
                     <option value="8">FREEZER#2</option>
                     <option value="19">BOX#9</option>
                     <option value="20">QBUILDING</option>
                  </select>
                 
                 </div>
                
             
             </div> <!--end of <div class='subtier1-options'> -->
             
             
        </div>
    </div>

在css文件中使用类时，类将按照它们的编写顺序应用。由于shown类在subtier2-options类之上，因此它首先被应用。因此，当应用subtier2-options时，显示设置为block，然后更改为none。
你只需要改变css中类的顺序，如下所示，然后它就可以工作了。

$(".tier1-options :radio").on("change", function (e) {
      //remove shown class from all tier2 options and clear values from all form elements inside it
      $('.tier2-options')
        .removeClass('shown')
        .find('input, select').val('')
      
      //show the related tier2 options
      $(this)
        .parents('.tier1-options')
        .find('.tier2-options')
        .addClass('shown')
    });
    
    $(".subtier1-options :radio").on("change", function (e) {
      //remove shown class from all tier2 options and clear values from all form elements inside it
      $('.subtier2-options')
        .removeClass('shown')
        .find('input, select').val('')
      
      //show the related tier2 options
      $(this)
        .parents('.subtier1-options')
        .find('.subtier2-options')
        .addClass('shown')
    });

.tier2-options {
      display: none;
      margin-left: 1rem;
      padding: 1rem;
      background-color: #EEE;
    }
    
    .subtier2-options {
      display: none;
      margin-left: 1rem;
      padding: 1rem;
      background-color: #EEE;
    }

    .shown{
      display: block;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <h5>Select one of the checkboxes:</h5>

    <div class='tier1-options'>
      <label>
        <input name="useroption" type="radio" value="changeLocation">
        Change Location
      </label>

      <div class="tier2-options">
        <select name="availableMarkAsFullLocations">
          <option value="-">--Please Select--</option>
          <option value="3">BOX#3</option>
          <option value="6">FREEZER#1</option>
          <option value="8">FREEZER#2</option>
          <option value="19">BOX#9</option>
          <option value="20">QBUILDING</option>
        </select>
      </div>
    </div>

    <div class="tier1-options">
      <label>
        <input name="useroption" type="radio" value="updateLocation">
        Update Location
      </label>

      <div class="tier2-options">
        <select name="availableUpdateLocations">
          <option value="-">--Please Select--</option>
          <option value="3">BOX#3</option>
          <option value="6">FREEZER#1</option>
          <option value="8">FREEZER#2</option>
          <option value="19">BOX#9</option>
        </select>
      </div>
    </div>

    <div class="tier1-options">
      <label>
        <input name="useroption" type="radio" value="retireLocation">
        Retire
      </label>

      <div class="tier2-options">
        <select name="availableRetireLocations">
           <option value="-">--Please Select--</option>
           <option value="3">BOX#3</option>
           <option value="6">FREEZER#1</option>
           <option value="8">FREEZER#2</option>
           <option value="19">BOX#9</option>
           <option value="20">QBUILDING</option>
        </select>
      </div>
    </div>

    <div class='tier1-options'>
      <label>
        <input name="useroption" type="radio" value="moveContents">
        Move Contents
      </label>

        <div class="tier2-options">
             <div class='subtier1-options'>
                 <label>
                  <input name="useroption" type="radio" value="moveContentsTierI">
                  Tier I move
                </label>

                 <div class="subtier2-options">
                     <select name="availableTierILocations">
                     <option value="-">--Please Select--</option>
                     <option value="3">BOX#3</option>
                     <option value="6">FREEZER#1</option>
                     <option value="8">FREEZER#2</option>
                     <option value="19">BOX#9</option>
                     <option value="20">QBUILDING</option>
                  </select>
                 
                 </div>
                
             
             </div> <!--end of <div class='subtier1-options'> -->
             
             <div class='subtier1-options'>
                 <label>
                  <input name="useroption" type="radio" value="moveContentsTierII">
                  Tier II move
                </label>

                 <div class="subtier2-options">
                     <select name="availableTierIILocations">
                     <option value="-">--Please Select--</option>
                     <option value="3">BOX#3</option>
                     <option value="6">FREEZER#1</option>
                     <option value="8">FREEZER#2</option>
                     <option value="19">BOX#9</option>
                     <option value="20">QBUILDING</option>
                  </select>
                 
                 </div>
                
             
             </div> <!--end of <div class='subtier1-options'> -->
             
             
        </div>
    </div>

jquery 尝试将单选按钮放入单选按钮中

1条答案

相关问题

热门标签

最新问答