CODEWITHSUNDEEP
javascriptjquery
Zelter Ady
Zelter Ady

Reputation: 6348

jquery trigger change event on checkbox

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".

Upvotes: 37

Views: 112147

Answers (5)

Alex
Alex

Reputation: 9740

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);

Upvotes: 10

Nishad Up
Nishad Up

Reputation: 3615

use prop method.

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

Upvotes: 0

Jace
Jace

Reputation: 3072

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();

Upvotes: 34

Yeronimo
Yeronimo

Reputation: 1749

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);
                });

Upvotes: 2

Joachim VR
Joachim VR

Reputation: 2340

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.

Upvotes: 6

Related Questions