CODEWITHSUNDEEP
javascriptjqueryjquery-events
Null Reference
Null Reference

Reputation: 11340

Programmatically changing checkbox does not fire change event

I have the following code here:

$('input[type="checkbox"][id="gridlines"]').change(function () {
    alert('hello world');
});

$('#gridlines').prop('checked', true);

When I load my page, the checkbox is checked, but the "hello world" does not get prompted.

However, when I click on the checkbox manually, "hello world" gets prompted.

What gives?

Upvotes: 14

Views: 3693

Answers (2)

Adil
Adil

Reputation: 148110

You need to call change() or use trigger() to trigger the change event when values are changed through code.

Using .change()

$('#gridlines').prop('checked', true).change();

Using .trigger()

$('#gridlines').prop('checked', true).trigger("change");

Upvotes: 16

Arun P Johny
Arun P Johny

Reputation: 388316

That is how it is suppose to work, only user interaction is support to trigger the change event

You can trigger it manually using .change()/.trigger('change');

$('#gridlines').prop('checked', true).change();

change

The change event is fired for <input>, <select>, and <textarea> elements when a change to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each change to an element's value.

Upvotes: 5

Related Questions