Javascript 单击单选按钮，显示/隐藏具有动态更改ID或类的div @foreach（$result->package as$package）//使用Laravel的刀片模板列出DB中的所有包 {{$package->name}} @foreach（$package->price\u选项作为$price\u选项） 价格选项：{{$Price_Option->id}} @foreach（$price\u option->value as$value） 值：{{$value->value}} @endforeach @endforeach @endforeach

页面来源：

<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>

包1

价格选择：75

值：虚拟文本

值：虚拟文本2

价格选择：78

值：虚拟文本

值：虚拟文本2

套餐2

价格选择：76

值：a

值：b

值：c

我需要的是在单击时将所有价格选项显示为单选按钮，例如，package 1单选按钮，并将所有价格选项显示为package2的单选按钮，但同时隐藏

Package1

的价格选项

然后，对于我单击以显示属于该价格选项的所有值的所有价格选项

目前没有任何CSS或JQuery/JavaScript代码

尝试将所有

div

s（id以

package

开头）隐藏到其他

单选按钮，然后仅显示属于单击按钮的div：

<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>

希望这有帮助。
共享解析的HTML而不是
php
包装的HTML我不明白你的意思是什么：（@RayonDabre的意思是，例如，不使用
@foreach
向我们显示您的
php
代码，而是向我们显示发送到浏览器的
html
（当然没有
php
语法）@这里是RayonDabre。我故意将类和id留空，所以你可以随意命名它们。我用页面源代码更新了我的帖子。我需要显示的内容可能更清楚。我向@RajivRisi bellow解释了这一点
$('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();
});