jquery trigger change event on checkbox

Question

Is it possible to trigger change event on a checkbox using javascript/jquery?

Something like this (I run triggerChange on click of a button):

<label><input type="checkbox" id="chk"/>Label for chk</label>

<script>
function triggerChange(){
    $("#chk").trigger("change");
}
</script>

When I run the above code I get this error: " trigger is not a function ".

Answer 1

That trigger is not a function error message indicates something else is at play. According to this SO question:

What happens when a jQuery selector wasn't found?

no.good.at.coding says:

Do note however that you must ensure that selector is a jQuery object! Otherwise, you could get an error indicating that "trigger is not a function".

It's likely that you have forgotten jQuery?

---

As for your implementation, you should be fine the way you are using it. But trigger should be used to trigger event methods on elements that have already been attached via jQuery. Check out my demo:

Fiddle:
With click event: http://jsfiddle.net/fS4R5/1/
Without click event: http://jsfiddle.net/fS4R5/2/

HTML:

<label><input type="checkbox" id="chk"/>Label for chk</label>

JS:

function triggerChange(){
    $("#chk").trigger("change");
}

$("#chk").change(function() {
   alert("triggered!"); 
});

triggerChange();

Answer 2

In jQuery, you can usually trigger an event by calling it's eventhandler method withoud any function parameters.

For example a click handler can be assigned as such:

$('#mything').click(function(e){dostuff});

the click event in itself can be triggered by simply running: $('#mything').click();

I suspect this can be done for every existing event in jQuery.

Answer 3

I think the preferred method since 1.9.1 is 'on'. Specially if you use dynamically added checkboxes.

Say you have a div with id='divCOntent' and on it is a checkbox with id='cballaut', you could do this

$('#divcontent').on('click', '#cballaut', function (e) {
                    alert(this.checked);
                });

Answer 4

use prop method.

$('#myCheck').prop('checked', true);
$('#myCheck').prop('checked', false);

Answer 5

Be sure that Input of Type checkbox is enabled, in case is disabled trigger will not fire event

//fire event 
$('#ceckBoxId').click();
$('#ceckBoxId').trigger('click');

or change checkbox checked val

$('#ceckBoxId').prop('checked', true);
$('#ceckBoxId').prop('checked', false);