Auf Optionsfeld klicken, zeigen/versteckte divs mit dynamicaly IDs oder Klassen

Question

<div class=""> 
    @foreach($result->package as $package) //listing all packages from DB using Laravel's Blade template 
     <input id="id_radio{{$package->id}}" type="radio" value="{{$package->id}}" name="radio" 
     >{{$package->name}} <br> 
     <div class="" id="package{{$package->id}}"> 
      @foreach($package->price_option as $price_option) 
       Price Option: <input type="radio" value="{{$price_option->id}}" 
            name="radio">{{$price_option->id}} <br> 
       <div class=""> 
        @foreach($price_option->values as $value) 
         Values: {{$value->value}} <br> 
        @endforeach 
       </div> 
      @endforeach 
     </div> 
    @endforeach 
</div> 

Seite Quelle geändert:

<div class=""> 
    <input id="id_radio22" type="radio" value="22" name="radio" 
    >Package 1 <br> 
    <div class="" id="package22"> 
     Price Option: <input type="radio" value="75" 
          name="radio">75 <br> 
     <div class=""> 
      Values: Dummy text <br> 
      Values: Dummy text 2 <br> 
     </div> 
     Price Option: <input type="radio" value="78" 
          name="radio">78 <br> 
     <div class=""> 
      Values: Dummy text <br> 
      Values: Dummy text 2 <br> 
     </div> 
    </div> 
    <input id="id_radio23" type="radio" value="23" name="radio" 
    >Package 2 <br> 
    <div class="" id="package23"> 
     Price Option: <input type="radio" value="76" 
          name="radio">76 <br> 
     <div class=""> 
      Values: a <br> 
      Values: b <br> 
      Values: c <br> 
     </div> 
    </div> 
</div> 

Was ich brauche all Preis Optionen als Optionsfelder zu zeigen, wenn ich auf klicken, zum Beispiel Optionsfeld, Paket 1, und um alle Preisoptionen als Optionsfelder für Paket2 anzuzeigen, aber gleichzeitig die Preisoptionen von Package1 auszublenden.

Dann für alle Preisoptionen, die ich klicke, um alle Werte anzuzeigen, die zu dieser Preisoption gehören.

Derzeit habe keine CSS oder JQuery/JavaScript-Code

Answer 1

Working fiddle.

Versuchen Sie, alle div s zu verstecken bellong zu den anderen radio Tasten zeigen (die id mit package beginnen müssen), dann nur die div gehören zum geklickt ein:

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

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

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

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

Hoffnung, das hilft.