I wrote this snippet of javascript/jQuery to change a check box. /

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?

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?

• javascript
• jquery

• "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 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 Commented Apr 15, 2012 at 3:22

2 Answers 2

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

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