Javascript 单击第一个单选按钮时，自动打开该div内的单选按钮

我有包裹清单。它们都是单选按钮。当点击时，我得到的价格选项列表也是单选按钮，但只有第一个价格选项，其他的是普通按钮

当我点击package单选按钮时，我需要同时选中并激活first price选项，以便它可以显示其中的一些值。其他的需要关闭

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

---

我假设您不能更改HTML代码并添加一些类。因此，您可以使用如下内容：

/*单选按钮*/
//设置变量
var$packages=$（'div[id^=“package”]”），
$priceOptions=$（'div[id^=“price\u option\u div”]”），
价格选择权；
//藏东西
$packages.hide（）；
$priceOptions.hide（）；
$（'input[id^=“id_radio”]”）。在（'click'，函数（）{
//藏东西
$packages.hide（）；
$priceOptions.hide（）；
//安全价格期权价值
priceOptionNr=$（'#package'+$（this.val（））
.find（'.price_option'）.val（）；
//显示特定价格选项+连接的div
$（'#package'+$（this.val（））.show（）
.find（“#price_option_div”+priceOptionNr）.show（）；
});
$（'price_option'）。在（'click'，函数（）{
$priceOptions.hide（）；
$（“#price_option_div”+$（this.val（））.show（）；
});

Paket 1
学分：20
持续时间：2分钟
每月200美元


价格选择：86


价值观
Vrednost 31

Vrednost 32

替代付款

价值观
助理秘书长

asdasd

我假设您不能更改HTML代码并添加一些类。因此，您可以使用如下内容：


/*单选按钮*/
//设置变量
var$packages=$（'div[id^=“package”]”），
$priceOptions=$（'div[id^=“price\u option\u div”]”），
价格选择权；
//藏东西
$packages.hide（）；
$priceOptions.hide（）；
$（'input[id^=“id_radio”]”）。在（'click'，函数（）{
//藏东西
$packages.hide（）；
$priceOptions.hide（）；
//安全价格期权价值
priceOptionNr=$（'#package'+$（this.val（））
.find（'.price_option'）.val（）；
//显示特定价格选项+连接的div
$（'#package'+$（this.val（））.show（）
.find（“#price_option_div”+priceOptionNr）.show（）；
});
$（'price_option'）。在（'click'，函数（）{
$priceOptions.hide（）；
$（“#price_option_div”+$（this.val（））.show（）；
});

Paket 1
学分：20
持续时间：2分钟
每月200美元


价格选择：86


价值观
Vrednost 31

Vrednost 32

替代付款

价值观
助理秘书长

asdasd

好的，这部分起作用了。但现在，替代付款按钮什么都不做，它应该是可点击的，并且在点击时显示它自己的值。哦，是的，忘记了最后一个事件。编辑了这篇文章。现在它应该可以正常工作了。现在可以通过点击按钮或收音机在两种付款方式之间切换。好的，这部分起作用。但现在，替代付款按钮什么都不做，它应该是可点击的，并且在点击时显示它自己的值。哦，是的，忘记了最后一个事件。编辑了这篇文章。现在它应该可以正常工作了。现在，只需单击按钮或收音机，即可在两种付款方式之间切换。
        /*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());
    });