As title suggests I want to know the difference between the change
and click
event of checkbox (in jQuery)
I have read down the answer to this What the difference between .click and .change on a checkbox
But, its not working for me. change
fires even when I hit spaces without losing focus.
Here's a fiddle demo
Both seems to be working alike. Am I missing something here ?
The difference I experienced is this:
var $check = $(':checkbox');
$checkbox.checked = true;
$checkbox.click( function() {
alert(this.checked); // true
}).change( function() {
alert(this.checked); // false
});
So with click the state has not yet changed, with change it has...
you can check or uncheck checkbox without clicking, using keyboard (tab and space bars) this goes to change statement but not to click. IMHO
Please let me know if this doesn't help I will remove my post:
Change
: http://api.jquery.com/change/ - I reckon change event get triggered when the state
of the element if changed i.e. not clicked but changed. Checkbox has checked and unchecked state.
Click
: click event is when you click the element doesn't matter what the state of the checkbox is going to be.
like in pseudo code
if checkbox state is checked
alert(Hulk is awesome);
if checkbox is click every time
alert(Ironman is alright);
Change event fires when check box status has been changed through whatever occurrence will be happened either through pressing space when check box was focused Or Triggered change event Or clicked Where as Click event has been fired only when we clicked on check box through mouse click but at that time before click if change event has been specified then it also runs and then execute click event.
Here you can see clear script has been done on bins: http://codebins.com/codes/home/4ldqpbu
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.
The main difference: when you click / hit space on a focused checkbox first the click
event fired, with no changes. At this point you can still prevent the default action (with event.preventDefault()
) which would be to toggle the checked
state of that checkbox, and fire the change
event (which hasn't got default action).
In some browsers the change event will fire only after the first blur
after the click
.
I would guess that change fires when the checkbox changes (even if you don't click on it). Eg if you change the checkbox's state via some other function.
©2020 All rights reserved.