What the difference between .click and .change on a checkbox [duplicate]

Solution 1:

onchange in IE only fires when the checkbox loses focus. So if you tab to it, hit space a few times, tab out, you'll only get one onchange event, but several onclick events.

Note: this is one of the very, very, very rare times when IE's behavior is correct (according to spec) and other browsers are wrong.

Solution 2:

Two reasons why onclick is preferred over onchange.

1. Internet Explorer only fires the onchange event when the checkbox loses the focus (onblur). So onclick is more of a cross browser solution.

2. onchange happens only after the element lose focus.(You wont see a difference since you are calling alert and losing focus on every change). The pseudo code on MDC pretty much explains the element.onchange implementation.

   control.onfocus = focus;
   control.onblur = blur;
   
   function focus () {
       original_value = control.value;
   }
   
   function blur () {
       if (control.value != original_value)
           control.onchange();
   }