Daten-Toggle = „Tasten“ Bootstrap-Radio-Button nicht in JavaScript

Question

erkannt Ich versuche, ein div (#asideform) zu verstecken, wenn ich einen Radiobutton klicken und es funktioniert, wenn ich die Daten-Toggle entfernen = "Knöpfe" von der Hauptdiv (die für das Stylen benötigt wird), aber nicht, wenn ich es dort lasse.

Darf ich es im JavaScript-Code richtig ausdrücken?

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

prüfen dieses Beispiel, ich denke, das ist das, was Sie meinen. Fiddle

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

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

Answer 2

Bei Verwendung data-toggle="buttons" Sie Ziel klicken ist die label von Radio, das Feuer nicht auf input Radio, warum Ihr click Ereignis ist.

So einfach 10 Ereignis verwenden, um zu sehen, radio Wert, sogar Label klicken wird Feuer Eingabe ändern, dann hat es funktioniert.

So ersetzen

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

mit

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

Hier ist die Arbeitsbeispiel:

$(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>