Sazaj Sazaj - 7 months ago 14
HTML Question

Checkbox is unchecked but the content of a checked checkbox is showing up

Just like the title says.
Here is my code:

$('#somediv').change(function() {
if(this.checked) {
$('.leaflet-marker-pane').show(1);
}
else {
$('.leaflet-marker-pane').hide(1);
}
});


<input style="float: left;" type="checkbox" id="somediv" name="somediv">


This happens when the browser is refreshed. The content should not show up, because the checkbox is unchecked, but it is showing up.

Answer

if it's unchecked by default just set a display: none in css to the class and that'it

.leaflet-marker-pane{
  display: none;
}

or, if it's a dynamic value check on document ready the value and set it, so when refreshing page it will show/hide according to the checkbox value

$(document).ready(function() {
    check($('#somediv'));
});

$('#somediv').change(function() {
    check($(this));
});

function check(checkbox){
    checkbox.is(":checked") ? $('.leaflet-marker-pane').show() : $('.leaflet-marker-pane').hide();
}

check example here: FIDDLE

Comments