Jquery Difference Between Change and Click Event of Checkbox

jQuery difference between change and click event of checkbox

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.

jQuery checkbox change and click event

Tested in JSFiddle and does what you're asking for.This approach has the added benefit of firing when a label associated with a checkbox is clicked.

Updated Answer:

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val(this.checked);

    $('#checkbox1').change(function() {
        if(this.checked) {
            var returnVal = confirm("Are you sure?");
            $(this).prop("checked", returnVal);
        }
        $('#textbox1').val(this.checked);        
    });
});

Original Answer:

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function() {
        if($(this).is(":checked")) {
            var returnVal = confirm("Are you sure?");
            $(this).attr("checked", returnVal);
        }
        $('#textbox1').val($(this).is(':checked'));        
    });
});

What the difference between .click and .change on a checkbox

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.

Click vs Input vs Change for checkboxes?

These 3 events duplicate each other's functionality because you are looking at a checkbox which happens to be a special case.

For example, if you were to take a text field

• The event input will fire whenever the text in an element is changed using the user interface.
• The event change will fire (on most browsers) whenever the text element loses focus. It would only be triggered once instead of after every keystroke.
• The event click will fire whenever a user clicks on the text field.

If we were to apply this to checkboxes (keeping in mind there is only one thing a checkbox can be changes into: either checked => unchecked orunchecked => checked)

• The event input will fire whenever the checked state is changed using user interface.
• The event change will fire whenever the checked state has changed
  in an element (or when the checkbox loses focus in IE).
• The event click will fire after the check state has finished changing .

The 3 events have very similar functionality (almost duplicates) because they are all trying to do something different that functionally does the same thing on checkboxes. The only differences being subtle implementation details.

I would use click to avoid having issues from the user of diffrent browsers.

checkbox click event fired twice for class name vs once for id (jquery)

Issue:- Since div and checkbox both share same class, that's why event trigger two times (clicking on checkbox trigger event on checkbox as well as on div both due to the same class)

So change the classes and you will good to go

Working snippet:-

jQuery( document ).ready(function(event) {
  jQuery(".checkbox").click(function() {
    if(jQuery(this).is(":checked"))      alert('checked');
    else      alert('unchecked ');

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="container">  <h2><label><input type="checkbox" class="checkbox" value="">Ignore  Registration</label></h2></div>

jQuery checkbox checked state changed event

Bind to the change event instead of click. However, you will probably still need to check whether or not the checkbox is checked:

$(".checkbox").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

The main benefit of binding to the change event over the click event is that not all clicks on a checkbox will cause it to change state. If you only want to capture events that cause the checkbox to change state, you want the aptly-named change event. Redacted in comments

Also note that I've used this.checked instead of wrapping the element in a jQuery object and using jQuery methods, simply because it's shorter and faster to access the property of the DOM element directly.

Edit (see comments)

To get all checkboxes you have a couple of options. You can use the :checkbox pseudo-selector:

$(":checkbox")

Or you could use an attribute equals selector:

$("input[type='checkbox']")

.on change vs .on click

You should use change, since a checkbox can be changed via a keyboard (tab to element, press space). Also, it can be changed from some other Javascript code (in the future), or via a label being clicked if that label is 'attached' to the checkbox.

table row click event and checkboxes

$(".shop_order_single_table input").on("click", function(e) { 
   e.stopPropagation();
});   

$(".shop_order_single_table").on("click", function(e) { 
   // Your code
});

jQuery checkbox event handling

$('#myform :checkbox').change(function() {
    // this will contain a reference to the checkbox   
    if (this.checked) {
        // the checkbox is now checked 
    } else {
        // the checkbox is now no longer checked
    }
});

---

Related Topics