Bootstrap-Checkboxen und jquery

Question

Ich verwende Bootstrap-Kontrollkästchen, die sich nicht wie normale Kontrollkästchen zu verhalten scheinen. Bei anderen Posts scheint es, dass Bootstrap-Kontrollkästchen einen Wert von undefined zurückgeben, so dass die Verwendung eines if-Kontrollkästchens nicht funktioniert.

Code:

<div class="checkbox checkbox-primary"> 
    <input id="homeaddress" type="checkbox" checked> 
    <label for="homeaddress"> 
     Same As My Home Address 
    </label> 
</div> 
<div id="show-hide-address"> 
    content 
</div> 



$("#show-hide-address").hide(); 
$(document).ready(function(){ 
    $("#homeaddress").on("click", function(){ 
     if ($(this).attr("checked")==undefined) { 
       $('#show-hide-address').slideUp(); // checked 
      } else { 
       $('#show-hide-address').slideDown(); // unchecked 
      } 
    }); 
}); 

Wenn die Seite lädt das Kontrollkästchen aktiviert ist und der Inhalt div unsichtbar ist, wie es sein sollte. Wenn ich es abrufe, wird das Inhalts-Div nicht richtig angezeigt. ABER wenn ich noch einmal auf die Checkbox klicke, funktioniert die Folie nicht, nichts passiert. Hat sich schon mal jemand damit beschäftigt. Fehle ich etwas? Danke,

UPDATE: hinzugefügt, um eine Geige https://jsfiddle.net/gj3w046f/1/

Answer 1

versuchen diese:

$('#homeaddress').change(function() { 
    if ($(this).is(':checked')) { 
    $('#show-hide-address').slideUp(); 
    } else { 
    $('#show-hide-address').slideDown(); 
    } 
}); 

hier Fiddle

Answer 2

Sie müssen die Art und Weise ändern Sie das Attribut einlagern möchten. Verwenden Sie diese Option:

$(this).is(':checked')