我有包裹清单。所有这些都是单选按钮。点击后，我得到的价格选项列表也是单选按钮，但只有第一个价格选项，其他是普通按钮。
当我点击包单选按钮时，我需要先检查并激活第一个价格选项，这样它就可以在其中显示一些值。其他人需要关闭。
<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: </label>86
<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());
});
答案 0 :(得分：2)
我认为您无法更改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: </label>86
<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>