Why does dynamically changing a checkbox not trigger a form change event?
javascript, jquery
Solution
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');`
Problem
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?