jQuery difference between change and click event of checkbox

by

According to the W3C, the onclick event is triggered by the keyboard for accessibility purposes:

SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons

In order to provide a better user experience for those without the use of a mouse, browsers have been developed to fire the onclick event even if the click occurs with a keyboard.

For this reason, jQuery’s click event will fire even if the checkbox is clicked by using the keyboard’s spacebar. change, obviously, will fire every time the checkbox’s state changes.

The checkbox just happens to be the special case where change and click are interchangable, because you can’t fire the change event without also triggering click.

Of course, the exception to this rule is if you were to use javascript to manually alter the checkbox, such as:

/* this would check the checkbox without firing either 'change' or 'click' */
$('#someCheckbox').prop('checked',true);

/* this would fire 'change', but not 'click'. Note, however, that this
   does not change the checkbox, as 'change()' is only the function that
   is fired when the checkbox changes, it is not the function that
   does the changing  */
$('#someCheckbox').trigger('change');

/* this would fire 'click', which by default change state of checkbox and automatically triggers 'change' */
$('#someCheckbox').trigger('click');

Here’s a demonstration of these different actions: http://jsfiddle.net/jackwanders/MPTxk/1/

Hope this helps.

More Related Contents:

  1. Using jquery check/uncheck SelectAll checkbox when all the checkboxes in the group are checked/unchecked
  2. How do I check whether a checkbox is checked in jQuery?
  3. Setting “checked” for a checkbox with jQuery
  4. Check if checkbox is checked with jQuery
  5. jQuery checkbox change and click event
  6. How to stop event bubbling on checkbox click
  7. How to pass parameters on onChange of html select
  8. Testing if a checkbox is checked with jQuery
  9. How to check all checkboxes using jQuery?
  10. jquery attr(‘checked’,’checked’) works only once
  11. What the difference between .click and .change on a checkbox [duplicate]
  12. How to select all checkboxes with jQuery?
  13. Run change event for select even when same option is reselected
  14. How do I encode a JavaScript object as JSON?
  15. How do i disable a submit button when checkbox is uncheck?
  16. Possible to associate label with checkbox without using “for=id”?
  17. How to check in js that user has checked the checkbox in Google recaptcha?
  18. How to reset all checkboxes using jQuery or pure JS?
  19. Why isn’t my checkbox change event triggered?
  20. Rails 4: how to use $(document).ready() with turbo-links
  21. jQuery animate backgroundColor
  22. Is it possible to display a custom message in the beforeunload popup?
  23. Cross domain iframe issue
  24. Javascript Print iframe contents only
  25. Handling key-press events (F1-F12) using JavaScript and jQuery, cross-browser
  26. jquery, find div class name at a certain position while scrolling
  27. How to format a phone number with jQuery
  28. regular expression to validate datetime format (MM/DD/YYYY) [duplicate]
  29. Specifying the value output of of an HTML5 input type = date?
  30. Why I cant use jQuery functionality

Leave a Comment