I am currently facing an issue with the behavior of bootstrap checkboxes compared to regular ones. After researching on various online forums, it appears that bootstrap checkboxes return a value of undefined which is causing my if checked statement to not work as expected.
Below is the code snippet:
<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
}
});
});
Upon loading the page, the checkbox is initially checked and the content div remains hidden as intended. However, when I uncheck the box, the content div slides down correctly. The problem arises when I click the checkbox again, as the slide up effect does not trigger. Has anyone encountered this issue before or can offer any advice? Thank you.
UPDATE: I have created a fiddle to demonstrate the issue: https://jsfiddle.net/gj3w046f/1/