Checkbox change does not fire jquery event only first time

Question

I have a page with this checkbox:

<div class="col-md-12">
          <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary btn-xs ">
              <input id="informativa" type="checkbox" autocomplete="off" checked>
              <span class="glyphicon glyphicon-ok"></span>
            </label>
          </div>
          (*) label
        </div>

And the following js code:

$(document).ready(function(){


    $("#informativa").on("change", function(event){
        if(this.checked) {
            alert("Checked");
            return;
        }
        alert("Unchecked");
    });

});

The event change is fired just from the second time I check/uncheck the box. I can't make it working from the first click check.

Answer 1

You can try like this -

$("#informativa").change(function() {
    if($(this).is(":checked")) {
        alert("Checked");
    }else{
        alert("Unchecked");
    }
});

It's tested and working for me.