单击第一个单选按钮时，将自动在该div内部打开单选按钮

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

我认为您不能更改您的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>