Why does dynamically changing a checkbox not trigger a form change event?

Question

I wrote this snippet of javascript/jQuery to change a check box. http://jsfiddle.net/johnhoffman/crF93/

Javascript

$(function() {
    $("a").click(function() {
       if ($("input[type='checkbox']").attr('checked') == "checked")
           $("input[type='checkbox']").removeAttr('checked');
       else
           $("input[type='checkbox']").attr('checked', 'checked');
       return false;
    });

    $("input[type='checkbox']").change(function(){ 
        console.log("Checkbox changed.");            
    });    
});

HTML

<input type="checkbox" />
<a href="#">Change CheckBox</a>

Interestingly, clicking the link alters the text box, but does not trigger the form change event that calls the function that logs a message in Chrome Web Developer Console. Why? How do I make it do that?

"The change event occurs when a control loses the input focus and its value has been modified since gaining focus." No focus change means no change event. — mu is too short
– mu is too short, Commented Apr 15, 2012 at 3:21
possible duplicate of onchange event not fire when the change come from antoher function — mu is too short
– mu is too short, Commented Apr 15, 2012 at 3:22

Community · Accepted Answer · 2020-06-20 09:12:55Z

26

You need to trigger the change event, .trigger('change'), so that event knows that a change took place.

From http://api.jquery.com/change/:

Description: Bind an event handler to the "change" JavaScript event, or trigger that event on an element.

This method is a shortcut for .on( "change", handler ) in the first two variations, and .trigger( "change" ) in the third.

The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

Demo:

http://jsfiddle.net/nPkPw/3/

Using chaining: http://jsfiddle.net/nPkPw/5/
i.e. $("input[type='checkbox']").trigger('change').attr('checked', 'checked');

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 15, 2012 at 3:16

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sinetheta Over a year ago

seems a little verbose to simulate a click

Yohn Over a year ago

for future reference, I had to put trigger after the attr so my script to see what the change was.

xiao Over a year ago

trigger should occur after the attr change not before $("input[type='checkbox']").attr('checked', 'checked').trigger('change');

Sagive Over a year ago

Man... wish i could find this 4 hours ago when i was searching - (google are you listening) - "toggle one filter parameter isotop js". Thanks mate.

Sinetheta · Accepted Answer · 2012-04-15 03:16:07Z

10

This isn't surprising, but I guess you could as this to the list of non-effect in the msdn.

"This event is fired when the contents are committed and not while the value is changing."
"The onchange event does not fire when the selected option of the select object is changed programmatically."

You could always just .click() it jsFiddle

answered Apr 15, 2012 at 3:16

Sinetheta

9,4495 gold badges33 silver badges52 bronze badges

Collectives™ on Stack Overflow

Why does dynamically changing a checkbox not trigger a form change event?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related