JQuery checkbox check and run javascript onclick event

Question

I am trying to check a checkbox using jQuery and fire the onclick event in this process.

Let's say I have a checkbox defined in html:

<input type="checkbox" value="checked" name="check1" onclick="alert(this.value);"> 

And I have a jQuery instruction that runs in a function:

 $('input[name=check1]').attr('checked', true); 

As a result, the check is checked, but the javascript onclick event is not fired (hence, there is no warning). But if I were to start the click even manually:

 $('input[name=check1]').attr('checked', true).trigger('click'); 

As a result, the flag is checked, the javascript onclick event is fired (and the value is correctly received), but after that the flag is not checked after that.

Can someone tell me how I can achieve what I'm trying to do?

Answer 1

Use .triggerHandler() instead of .trigger() :

 $('input[name=check1]').attr('checked', true).triggerHandler('click'); 

Also, use .prop() instead of .attr() :

 $('input[name=check1]').prop('checked', true).triggerHandler('click'); 

(if you are using jQuery 1.6 or later.) edit - Also, since I commented on a different answer, you have to keep an eye on the strange behavior of jQuery when programmatically triggering events. Here is an illustrative jsfiddle. When the real “click” occurs in the element, the “click” handler for the element will see the updated value of the “checked” flag. That is, if you click the check box without a checkmark, the click handler will see the “checked” flag set to true . However, if you run "click" on a flag without checking through jQuery, the "click" handler will see the "checked" flag set to false ! This is really bad in my opinion, but it has always been done like that.

change again - Oh, besides, I forgot one more important (and annoying) jQuery oddity: for unknown reasons, the .triggerHandler() API will only call handlers for the first matching element. If you try to call all the click flags, in other words:

 $('input:checkbox').triggerHandler('click'); 

then only the first flag on the page will be launched. What I usually do to deal with insanity is associating a handler with my own fake event name, as well as "click":

 $('input:checkbox').bind('click my-click', function() ... ) // or ".on()" with 1.7 

Thus, I can call "my click" and get the best of both worlds: the library starts the handler of all the agreed elements, but does not switch the actual state of the elements.

Answer 2

Edit:

 $('input[name=check1]').attr('checked', true).trigger('click'); 

To:

 $('input[name=check1]').trigger('click').prop('checked', true); 

Answer 3

this answer works fine:

$('input[name=check1]').attr('checked', true).change();

jsFiddle demo

Answer 4

.on('changed', ...) definitely something you should bind to the elements of the checkbox (it behaves much more wisely). Then you can simply fire the .click() trigger on the elements you want to switch state to see the corresponding event trigger (see DOM in a state of correspondence to what these handlers saw).

 <input type="checkbox" value="checked" name="check1"> <script> $('input').on('change', function(e) {alert(e.target.value);}); $('input').click(); // see the alert, and if you checked $(e.target).is(':checked') you should get true </script>