使用单选显示和隐藏 div答案

【问题标题】：Show & hide a div using a radio select使用单选显示和隐藏 div
【发布时间】：2014-02-12 00:03:05
【问题描述】：

我试图根据用户通过单选按钮选择的内容来显示我的代码部分。本质上，我希望仅当用户在第一组按钮中选择“第二”时才会显示 lift_choice。

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:

$(document).ready(function() {
   $("input[name$='floor']").click(function() {
       if($(this).val() == 'First') {
            $('#elevator_choice').hide();           
       }
       else {
            $('#elevator_choice').show();   
       }
   });
});

JsFiddle

【问题讨论】：

它对我有用：jsfiddle.net/barmar/mr9ah
您的代码工作正常。如果选择“第二”，则仅显示“否”，请检查此链接jsfiddle.net/38zea ...也许不包括 jquery.js。
嗯，很奇怪...当我在控制台上检查时，该功能似乎在页面加载时运行，而不是在我单击时运行。然后当我点击按钮时，它不会被调用。会这样吗？
或者你应该分享小提琴。
@LuisP 在你的小提琴中，忘记在 Frameworks & Extensions 部分选择 jquery 版本，选择 jquery 1.9（例如）并再次测试。

标签： javascript jquery radio-button show-hide

【解决方案1】：

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();   
       }
   });
});

【讨论】：

【解决方案2】：

好的，我找到了问题所在。我正在使用 Twitter Bootstrap，出于某种原因，Bootstrap 为按钮添加了一些样式，因此“onclick”事件不起作用。我将其更改为“onchange”，现在可以使用了。

谢谢大家

【讨论】：