26

I'm trying to check a checkbox using jQuery and trigger the onclick event in the process.

Say I have a checkbox defined in html:

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

And I have a jQuery statement that is triggered in a function:

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

The result is the checkbox gets checked but the javascript onclick event is not triggered (hence no alert). But if I were to trigger the click even manually as such:

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

The result is the checkbox gets checked, javascript onclick event is triggered (and the value is correctly gotten) but then the checkbox gets unchecked after that.

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

6 Answers 6

57

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're using jQuery 1.6 or newer.) edit — Also, as I commented on another answer, you have to watch out for jQuery's weird behavior when programmatically triggering events. Here is an illustrative jsfiddle. When a real "click" happens on an element, the "click" handler for the element will see the updated value of the "checked" flag. That is, if you click on an unchecked checkbox, the click handler will see the "checked" flag set to true. However, if you trigger "click" on an unchecked checkbox via jQuery, the "click" handler will see the "checked" flag set to false! That's a really bad thing, in my opinion, but it's always done that.

edit again — oh, also, I forgot another important (and irritating) jQuery weirdness: for reasons unknown, the .triggerHandler() API will only invoke handlers on the first matched element. If you try to trigger all the checkbox "click" handlers, in other words:

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

then only the first checkbox on the page will be triggered. What I generally do in order to deal with the insanity is bind the handler with my own fake event name as well as "click":

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

That way I can trigger "my-click" and get the best of both worlds: the library triggers the handler on all the matched elements, but it won't toggle the actual state of the elements.

1
  • Thanks for this. Another way to deal with the insanity of triggerHandler only invoking on the first matched element is to use $('input:checkbox').each(function() { $(this).prop('checked', true).triggerHandler('change'); });
    – SeBsZ
    Sep 19, 2017 at 9:56
13

Change:

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

To:

$('input[name=check1]').trigger('click').prop('checked', true);
1
  • 1
    Suprisingly this works, but Pointy's solution looks more sound. Thanks!
    – YK Tan
    Apr 22, 2012 at 13:36
4

this answer seems to work fine:

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

jsFiddle demo

0

.on('changed', ...) is definitely what you should be binding to on checkbox elements (it behaves much more reasonably. Then you could just manually trigger a .click() on the elements you want to toggle the state of to see the proper event trigger happen (and see the DOM in a matching state to what those handlers also 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>
0

on click checked..again click uncheck..
Here is the logic of this

$('input[name=check1]').prop('checked',!$('input[name=check1]').prop('checked'));
1
  • On behalf of @ChanceDurr, who doesn't have comment privileges: I have found that I had to use a dictionary for the prop thing; i.e: $('input[name=check1]').prop({'checked' : !$('input[name=check1]'}).prop('checked')); Jan 23, 2021 at 1:38
0

Just an addon to the other posts since I cannot comment. I have found that I had to use a dictionary for the prop thing.

IE

$('input[name=check1]').prop({'checked' : !$('input[name=check1]'}).prop('checked'));

1
  • Hi Chance. Welcome, and thank you for contributing to Stack Overflow! I've expressed this as a comment on the relevant answer and tagged you. Would you mind deleting this partial answer? Jan 23, 2021 at 1:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.