data-toggle =“ buttons”引導單選按鈕無法在JavaScript中識別

Question

單擊單選按鈕時，我試圖隱藏div（ #asideform ），如果我從主div中刪除了data-toggle =“ buttons” （樣式需要它），它會起作用，但如果我允許它，則不會那里。

我可以在JavaScript代碼中正確表達它嗎？

HTML：

<div class="btn-group form-group col-xs-6" data-toggle="buttons">
    <label style="float: left; margin-bottom: 0;">Owns 50% +</label>
    <br>
    <label style="margin-top: 1%" class="btn btn-primary active rdio50">
        <input type="radio" name="rdio50" id="foyes" name="foyes" autocomplete="off"  checked> Yes
    </label>
    <label style="margin-top: 1%" class="btn btn-primary rdio50">
        <input type="radio" name="rdio50" id="fono" name="fono" autocomplete="off"> No
    </label>
</div>

JavaScript：

$(function () {
    $("input[name='rdio50']").click(function () {
        if ($("#fono").is(":checked")) {
            $("#asideform").show();
        } else {
            $("#asideform").hide();
        }
    });
});

Answer 1

檢查這個例子，我想這就是你的意思。 小提琴

$('.btn-group').click(function() {
   if($('#fono').is(':checked')) { $('#asideform').show(); }

   else{ $('#asideform').hide();}
});

Answer 2

當使用data-toggle="buttons" ，單擊目標是廣播的label ，這就是為什么input廣播上的click事件不會觸發的原因。

因此，只需使用change事件來觀看radio值，即使單擊標簽也會觸發輸入更改，然后它就起作用了。

因此，更換

$("input[name='rdio50']").click(function () {...});

與

$("input[name='rdio50']").change(function () {...});

這是工作示例：

 $(function() { $("input[name='rdio50']").change(function() { if ($("#fono").is(":checked")) { $("#asideform").show(); } else { $("#asideform").hide(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.js"></script> <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" /> <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap-theme.css" rel="stylesheet" /> <div class="btn-group form-group col-xs-6" data-toggle="buttons"> <label style="float: left; margin-bottom: 0;">Owns 50% +</label> <br> <label style="margin-top: 1%" class="btn btn-primary active rdio50"> <input type="radio" name="rdio50" id="foyes" name="foyes" value="yes" autocomplete="off" checked>Yes </label> <label style="margin-top: 1%" class="btn btn-primary rdio50"> <input type="radio" name="rdio50" id="fono" name="fono" value="no" autocomplete="off">No </label> </div> <div id="asideform"> this is the asideform </div>