我正在尝试制作单选按钮，让人们选择选项，并显示不同的选项供他/她选择。我的代码是:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'wanted') {
$('.sec-row').show();
}
else {
$('.sec-row').hide();
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="form" id="add_property" method="post" action="#">
<div class="card-body">
<div class="first-row form-group">
<label for="">Purpose</label>
<div class="btn-group btn-group-toggle ml-5">
<label class="btn bg-olive">
<input type="radio" name="options1" id="forSale" autocomplete="off"> For Sale
</label>
<label class="btn bg-olive">
<input type="radio" name="options1" id="rent" autocomplete="off"> Rent
</label>
<label class="btn bg-olive">
<input type="radio" name="options1" id="wanted" autocomplete="off"> Wanted
</label>
</div>
</div> <!-- /.first_row -->
<div class="sec-row form-group ml-3" style="display:none">
<label for="">Wanted For</label>
<div class="btn-group btn-group-toggle">
<label class="btn bg-olive">
<input type="radio" name="options2" id="wf-buy" autocomplete="off"> Buy
</label>
<label class="btn bg-olive">
<input type="radio" name="options2" id="wf-rent" autocomplete="off"> Rent
</label>
</div>
</div>
<div class="third-row form-group">
<label for="">Property Type</label>
<div class="btn-group btn-group-toggle">
<label class="btn bg-olive">
<input type="radio" name="options3" id="homes" autocomplete="off">Homes
</label>
<label class="btn bg-olive">
<input type="radio" name="options3" id="plots" autocomplete="off">Plots
</label>
<label class="btn bg-olive">
<input type="radio" name="options3" id="commercial" autocomplete="off">commercial
</label>
</div>
</div>
</div>
</form>但问题是，如果我在 div 中使用 data-toggle="buttons"，那么在选择某些单选按钮时我无法获得事件值，它可以工作，但 js 不能那样工作。我需要制作两行或多行不同的单选按钮，当选择某个特定按钮时它们就会出现。
最佳答案
使用此代码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form role="form" id="add_property" method="post" action="#">
<div class="card-body">
<div class="first-row form-group">
<label for="">Purpose</label>
<div class="btn-group btn-group-toggle ml-5">
<label class="btn bg-olive">
<input type="radio" name="options1" id="forSale" autocomplete="off"> For Sale
</label>
<label class="btn bg-olive">
<input type="radio" name="options1" id="rent" autocomplete="off"> Rent
</label>
<label class="btn bg-olive">
<input type="radio" name="options1" id="wanted" autocomplete="off"> Wanted
</label>
</div>
</div> <!-- /.first_row -->
<div class="sec-row form-group ml-3" style="display:none">
<label for="">Wanted For</label>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn bg-olive">
<input type="radio" name="options4" id="wf-buy" autocomplete="off"> Buy
</label>
<label class="btn bg-olive">
<input type="radio" name="options5" id="wf-rent" autocomplete="off"> Rent
</label>
</div>
</div>
<div class="third-row form-group">
<label for="">Property Type</label>
<div class="btn-group btn-group-toggle">
<label class="btn bg-olive">
<input type="radio" name="options6" id="homes" autocomplete="off">Homes
</label>
<label class="btn bg-olive">
<input type="radio" name="options7" id="plots" autocomplete="off">Plots
</label>
<label class="btn bg-olive">
<input type="radio" name="options8" id="commercial" autocomplete="off">commercial
</label>
</div>
</div>
</div>
</form>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var radio_value=$(this).attr('id');
if(radio_value == 'wanted') {
$('.sec-row').show();
}else {
$('.sec-row').hide();
}
});
});
</script>
</html>
关于javascript - 选择特定按钮时显示不同的单选按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59823100/