Checkboxes

by Dan Wolfe

HTML

<form id="my_form">
<label><input type="checkbox" class="leaflet-control-layers-selector" name="variable_name_1" checked><span> Exiting checkbox</span></label>
</form>

CSS

label {
height: 30px !important;
line-height: 30px;
width: 100% !important;
border: 1px solid #999999;
border-radius: 4px;
margin-top: .25em;
margin-bottom: .25em;
background-color: #fff;
}

JavaScript

$('#my_form').append('<label><input type="checkbox" class="leaflet-control-layers-selector" name="variable_name_2" checked><span>Added checkbox</span></label>');

$(document).ready(function() {
$("input[type=checkbox]").click( function() {
    if ($(this).is(':checked')){
        console.log('%ccheck ' + $(this).attr('name'), 'background: green; color: white;');
    }
    else{
        console.log('%cuncheck ' + $(this).attr('name'), 'background: red; color: white;');
    }
});
});