最初のラジオボタンをクリックすると、該当する部門のラジオボタンが自動的に開きます

Question

私はパッケージのリストを持っています。それらのすべてがラジオボタンです。クリックすると、ラジオボタンの価格オプションのリストが表示されますが、最初の価格オプションだけが表示され、その他は通常のボタンです。

パッケージのラジオボタンをクリックすると、最初の価格オプションもチェックしてアクティブにする必要があるため、その中にいくつかの値が表示されます。他は閉鎖する必要があります。

<div class="col-md-12 packageList"> 

     <h4 class="col-sm-4"><input class="col-sm-1" id="id_radio26" 
     type="radio" value="26" name="radio"> Paket 1</h4> 

     <h4 class="col-sm-3">Credits:<span> 20</span></h4> 
     <h4 class="col-sm-3">Duration: <span>2min</span></h4> 
           <h4 class="col-sm-2"><span>$200</span>/Month</h4> 

          </div> 


          <br> 

          <div class="package" id="package26"> 
          <label>Price Option:&nbsp; </label>86&nbsp;&nbsp; 

             <label class="hideRadio"> 
              <input class="price_option" type="radio" 
                value="86" 
                name="price_option" checked="checked"> 

             </label> 


            <br> 
            <div class="col-md-12 valuesInput"> 
             <div class="" id="price_option_div_86"> 
              <div class="col-md-4 valuesTable"> 
               <table class="table table-striped table-hover"> 
                <thead> 
                <tr class="bg-primary content-box-header"> 
                 <th>Values</th> 
                </tr> 
                </thead> 


                 <tbody> 
                 <th> 
                  Vrednost 31<br> 
                  <input type="hidden" 
                    name="value-86[]" 
                    value="Vrednost 31"> 
                 </th> 
                 </tbody> 


                 <tbody> 
                 <th> 
                  Vrednost 32<br> 
                  <input type="hidden" 
                    name="value-86[]" 
                    value="Vrednost 32"> 
                 </th> 
                 </tbody> 


               </table> 
              </div> 


                         </div> 
            </div> 



             <label class="hideRadio"> 

              <button class="price_option" type="button" 
                name="price_option" value="91"> 
               Alternative Payment 
              </button> 

             </label> 


            <br> 
            <div class="col-md-12 valuesInput"> 
             <div class="" id="price_option_div_91"> 
              <div class="col-md-4 valuesTable"> 
               <table class="table table-striped table-hover"> 
                <thead> 
                <tr class="bg-primary content-box-header"> 
                 <th>Values</th> 
                </tr> 
                </thead> 


                 <tbody> 
                 <th> 
                  assd<br> 
                  <input type="hidden" 
                    name="value-91[]" 
                    value="assd"> 
                 </th> 
                 </tbody> 


                 <tbody> 
                 <th> 
                  asdasd<br> 
                  <input type="hidden" 
                    name="value-91[]" 
                    value="asdasd"> 
                 </th> 
                 </tbody> 


               </table> 
              </div> 


                         </div> 
            </div> 


          </div> 

これが今の私のスクリプトです：

 /*Radio buttons */ 
    $('div[id^="package"]').hide(); 

    $('body').on('click', 'input[id^="id_radio"]', function() { 
     $('div[id^="package"]').hide(); 
     $('#package' + $(this).val()).show(); 
     console.log($(this).val()); 

    }); 

    $('div[id^="price_option_div"]').hide(); 


    $('body').on('click', '.price_option', function() { 
     $('div[id^="price_option_div_"]').hide(); 
     $("#price_option_div_" + $(this).val()).show(); 
     console.log($(this).val()); 
    }); 

Answer 1

私はuはあなたのHTMLコードを変更し、いくつかのクラスを追加傾けることを前提としています。

/* Radio buttons */ 
 

 
    // set variables 
 
    var $packages = $('div[id^="package"]'), 
 
     $priceOptions = $('div[id^="price_option_div"]'), 
 
     priceOptionNr; 
 

 
    // hide stuff 
 
    $packages.hide(); 
 
    $priceOptions.hide(); 
 

 
    $('input[id^="id_radio"]').on('click', function() { 
 
     // hide stuff 
 
     $packages.hide(); 
 
     $priceOptions.hide(); 
 
     
 
     // safe price option value 
 
     priceOptionNr = $('#package' + $(this).val()) 
 
      .find('.price_option').val(); 
 
     
 
     // show specific price option + connected div 
 
     $('#package' + $(this).val()).show() 
 
      .find('#price_option_div_' + priceOptionNr).show(); 
 
    }); 
 

 
    $('.price_option').on('click', function() { 
 
     $priceOptions.hide(); 
 
     $("#price_option_div_" + $(this).val()).show(); 
 
    });

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

 
<div class="col-md-12 packageList"> 
 
    <h4 class="col-sm-4"><input class="col-sm-1" id="id_radio26" type="radio" value="26" name="radio"> Paket 1</h4> 
 
    <h4 class="col-sm-3">Credits:<span> 20</span></h4> 
 
    <h4 class="col-sm-3">Duration: <span>2min</span></h4> 
 
    <h4 class="col-sm-2"><span>$200</span>/Month</h4> 
 
</div> <br> 
 

 
<div class="package" id="package26"> 
 
    <label>Price Option:&nbsp; </label>86&nbsp;&nbsp; 
 
    <label class="hideRadio"> <input class="price_option" type="radio" value="86" name="price_option" checked="checked"> </label> <br> 
 

 
    <div class="col-md-12 valuesInput"> 
 
     <div class="" id="price_option_div_86"> 
 
      <div class="col-md-4 valuesTable"> 
 
       <table class="table table-striped table-hover"> 
 
        <thead> 
 
         <tr class="bg-primary content-box-header"> <th>Values</th> </tr> 
 
        </thead> 
 
        <tbody> 
 
         <th> Vrednost 31<br> <input type="hidden" name="value-86[]" value="Vrednost 31"></th> 
 
        </tbody> 
 
        <tbody> 
 
         <th> Vrednost 32<br> <input type="hidden" name="value-86[]" value="Vrednost 32"></th> 
 
        </tbody> 
 
       </table> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <label class="hideRadio"> <button class="price_option" type="button" name="price_option" value="91"> Alternative Payment</button> </label> <br> 
 

 
    <div class="col-md-12 valuesInput"> 
 
     <div class="" id="price_option_div_91"> 
 
      <div class="col-md-4 valuesTable"> 
 
       <table class="table table-striped table-hover"> 
 
        <thead> 
 
         <tr class="bg-primary content-box-header"> 
 
          <th>Values</th> 
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
         <th> assd<br> <input type="hidden" name="value-91[]" value="assd"></th> 
 
        </tbody> 
 
        <tbody> 
 
         <th> asdasd<br> <input type="hidden" name="value-91[]" value="asdasd"></th> 
 
        </tbody> 
 
       </table> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>