[英]Show & hide a div using a radio select
I am trying to show a section of my code depending on what the user selects via a radio button. 我试图显示代码的一部分,具体取决于用户通过单选按钮选择的内容。 Essentially, I want the elevator_choice to show up only if the users selects 'Second' in the first set of buttons.
本质上,我希望仅当用户在第一组按钮中选择“第二个”时才会显示lift_choice。
HTML: HTML:
<div class="row" style="padding: 0 0 10px 0;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="floor" value="First">First
</label>
<label class="btn btn-default">
<input type="radio" name="floor" value="Second">Second
</label>
</div>
</div>
<div class="row" style="padding: 0 0 10px 0; display:none;" id="elevator_choice">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="elevator" value="No">No
</label>
</div>
</div>
JQuery: jQuery的:
$(document).ready(function() {
$("input[name$='floor']").click(function() {
if($(this).val() == 'First') {
$('#elevator_choice').hide();
}
else {
$('#elevator_choice').show();
}
});
});
Add class name to each radio input and register click event on this input, before showing check whether the text is first or not.
<div class="row" style="padding: 0 0 10px 0;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input class="check" type="radio" name="floor" value="First">First
</label>
<label class="btn btn-default">
<input class="check" type="radio" name="floor" value="Second">Second
</label>
</div>
</div>
<div class="row" style="padding: 0 0 10px 0; display:none;" id="elevator_choice">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="elevator" value="No">No
</label>
</div>
</div>
$(document).ready(function() {
$('.check').click(function() {
if($(this).val() == 'Second') {
$('#elevator_choice').show();
}
else {
$('#elevator_choice').hide();
}
});
});
Ok, I figured out the problem. 好的,我知道了问题所在。 I am using Twitter Bootstrap and for some reason Bootstrap adds some style to the buttons so that the 'onclick' event does not work.
我正在使用Twitter Bootstrap,出于某种原因,Bootstrap为按钮添加了一些样式,因此'onclick'事件不起作用。 I changed it to 'onchange' and it works now.
我将其更改为“ onchange”,并且现在可以使用。
Thanks everyone 感谢大家
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.