jQuery difference between change and click event of checkbox

Question

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 ?

`click` means clicking the checkbox like any other element, `change` means that the value of the checkbox has been changed. — Esailija, Jun 26 '12 at 11:08
But value is going to be changed at every click. So whats the difference ? — Jashwant, Jun 26 '12 at 11:09
change will fire whenever the value of checkbox changes... and that can happen by - 1. clicking through a mouse 2. using the keyboard to change it's value 3. change the value programatically... but click event will only fire when you use your mouse to click or simulate the mouse click programatically — Mukesh Soni, Jun 26 '12 at 11:10
@Jashwant this one comes to mind first http://jsfiddle.net/8RFGn/1/ — Esailija, Jun 26 '12 at 11:12
@Jashwant that's extremely weird.. [here](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mouseevents-h3) click event is defined as `A click is defined as a mousedown and mouseup over the same screen location.` Yet mousedown/mouseup isn't fired at all when you use keyboard. — Esailija, Jun 26 '12 at 11:18
@Esailija, first thx for `pointer-events` (never heard of that). I am getting what you are trying to say, but I am concerned about practical use. Ofcourse `change` is not there just for `pointer-events` — Jashwant, Jun 26 '12 at 11:18
@Jashwant I think some browsers are just being non-standardly forgiving in firing the click here when keyboard is used. See the previous comment. — Esailija, Jun 26 '12 at 11:19
@Esailija Yes, `click` shouldnt be called by keyboard. That's why I mentioned jQuery. May be they normalise it — Jashwant, Jun 26 '12 at 11:20
@Jashwant nope I ran my tests in plain JS `.onclick/mouseup/mousedown/change = function(){};` in google chrome http://jsfiddle.net/8RFGn/2/ — Esailija, Jun 26 '12 at 11:20

score 62 · Accepted Answer · edited Jan 25 '19 at 12:20

62

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.

edited Jan 25 '19 at 12:20

Gh61

9,222
4
28
39

answered Jun 28 '12 at 19:24

jackwanders

15,612
3
40
40

6

`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` I just needed a simple and straight words like these. I'll wait for sometime. If no one objects on your words, you'll have the bounty. – Jashwant Jun 28 '12 at 19:27
@pozs, gives a an excellent difference too. But you deserve a bounty for summing everything and a w3c link for keyboard `onclick`. – Jashwant Jul 05 '12 at 04:42
2

There is a difference that people should probably take note of. If you're using IE10/11, the 'change' event won't fire due to a bug if the checkbox is in an indeterminate state (even if you click on it). See bug https://www.bountysource.com/issues/5225302-ie-doesn-t-fire-change-event-on-indeterminate-input-elements the 'click' event will fire reliably though – automaton Dec 19 '14 at 18:56
This part in the answer "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." is correct for most part. However, the users should note that there are exceptions. As I just found, if you are trying to detect a key like this this - if(event.shiftKey) - it will only work with click but not with change. Just in case it helps anyone – maX Dec 26 '18 at 09:28

score 11 · Answer 2 · answered Jul 03 '12 at 20:44

11

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.

answered Jul 03 '12 at 20:44

pozs

34,608
5
57
63

Excellent. Updated my [fiddle](http://jsfiddle.net/8RFGn/7/) for `preventDefault()` . On click event, it stops clicking but not on check event, it does not stop checking :) Its one of the major difference – Jashwant Jul 04 '12 at 18:49

score 3 · Answer 3 · answered Jun 26 '12 at 11:08

3

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.

answered Jun 26 '12 at 11:08

PaperThick

2,749
4
24
42

score 1 · Answer 4 · answered Jun 26 '12 at 11:22

1

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...

answered Jun 26 '12 at 11:22

Simon

7,182
2
26
42

That click won't fire via keyboard should be self-explanatory imo – Simon Jun 26 '12 at 11:25
thats a very good point. But it seems to fail [here](http://jsfiddle.net/8RFGn/6/) – Jashwant Jun 26 '12 at 11:31

score 0 · Answer 5 · answered Jun 26 '12 at 11:09

0

you can check or uncheck checkbox without clicking, using keyboard (tab and space bars) this goes to change statement but not to click. IMHO

answered Jun 26 '12 at 11:09

loler

2,594
1
20
30

1

`change` event fires even with mouse – Jashwant Jun 26 '12 at 11:11
i meant that. i meant change fires EVEN without mouse click. – loler Jun 26 '12 at 11:27
`click` fires event without mouse click :) – Jashwant Jun 26 '12 at 11:32

score 0 · Answer 6 · answered Jun 26 '12 at 11:13

0

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);

answered Jun 26 '12 at 11:13

Tats_innit

33,991
10
71
77

But in `checkbox`, state is going to be changed at every `click`. Can you point out a context where they work different – Jashwant Jun 26 '12 at 11:21
Yep sure; `change` is when the state gets change, where is `click` simple click event. i.e. change take place on state (checked/unchecked) happens; where as click is triggered when user clicks, lemme know if this make sense, – Tats_innit Jun 26 '12 at 11:24
@Jashwant lol bro you are binding `click` event with toggle and then `unbinding` why? `:)` ==> `.unbind('click').bind('change', cb);` or `.unbind('change').bind('click', cb);` Bazinga? – Tats_innit Jun 26 '12 at 11:39
I am binding/unbinding `click` and `change` event on `checkbox` on each `click` of `button`. Whats wrong in that ? – Jashwant Jun 26 '12 at 13:09
Hiya @Jashwant not sure what will be achieved by doing this bruv, thats what I meant, anyhooo its way to late at my end so me off to sleep, take it easy, cheers `:)` – Tats_innit Jun 26 '12 at 13:11
I just wanted to attach `change` and `click` event to checkbox, so I can check the functionality of both. I use a button for toggle the event attached with checkbox :) Sorry I havent commented my code. Am I clear now ? – Jashwant Jun 26 '12 at 17:33
If you click on a disabled checkbox `click` will fire, but `change` will not. If you change checkbox state with JS same story. – c2h5oh Jun 28 '12 at 20:30

score 0 · Answer 7 · answered Jul 03 '12 at 13:24

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

jQuery difference between change and click event of checkbox

7 Answers7

Linked

Related