使用單選顯示和隱藏div

Question

我試圖顯示代碼的一部分，具體取決於用戶通過單選按鈕選擇的內容。 本質上，我希望僅當用戶在第一組按鈕中選擇“第二個”時才會顯示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

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

Answer 2

好的，我知道了問題所在。 我正在使用Twitter Bootstrap，出於某種原因，Bootstrap為按鈕添加了一些樣式，因此'onclick'事件不起作用。 我將其更改為“ onchange”，並且現在可以使用。

感謝大家