尝试将单选按钮放入单选按钮内

Question

基本上，我正在关注我的这篇文章，如果我必须显示单选按钮以及其中的 和 显示 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>

但是当我尝试添加多个单选按钮时，此代码不适用于移动内容选项。基本上，当我点击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>

Answer 1

当您在 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>