嘗試將單選按鈕放入單選按鈕內

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>