What the Difference Between .Click and .Change on a 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.

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.

What is the difference between clicking a checkbox and calling its '.click()' function?

Because the click event is different from the change event, which is where the element changes. When the <div> does a .click() is triggers the click event which hasn't yet changed the state of the checkbox so when it checks it, it's in the previous state.

When you click directly on the <input>, you've already changed the state, even if the change event fires 2nd in order, the main point is the checkboxes checked status has changed, before the click handler is checking for it, so the state is current.

If you want accurate state information look for and trigger the change event instead, like this:

$(function() {
    $('input').change(function() {
        $("span").append("<br />" + (this.checked ? "Checked" : "Uncecked"));
    });
    $('div').click(function() {
        $('input').click().change();
    });
});

You can give it a try here, on the off-chance this isn't a behavior question and you're wanting an external clickable area, this is how I'd do it (via a <label> wrapping the input).
​

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

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

Getting value of HTML Checkbox from onclick/onchange events

The short answer:

Use the click event, which won't fire until after the value has been updated, and fires when you want it to:

<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label>

function handleClick(cb) {
  display("Clicked, new value = " + cb.checked);
}

Live example | Source

The longer answer:

The change event handler isn't called until the checked state has been updated (live example | source), but because (as Tim Büthe points out in the comments) IE doesn't fire the change event until the checkbox loses focus, you don't get the notification proactively. Worse, with IE if you click a label for the checkbox (rather than the checkbox itself) to update it, you can get the impression that you're getting the old value (try it with IE here by clicking the label: live example | source). This is because if the checkbox has focus, clicking the label takes the focus away from it, firing the change event with the old value, and then the click happens setting the new value and setting focus back on the checkbox. Very confusing.

But you can avoid all of that unpleasantness if you use click instead.

I've used DOM0 handlers (onxyz attributes) because that's what you asked about, but for the record, I would generally recommend hooking up handlers in code (DOM2's addEventListener, or attachEvent in older versions of IE) rather than using onxyz attributes. That lets you attach multiple handlers to the same element and lets you avoid making all of your handlers global functions.

---

An earlier version of this answer used this code for handleClick:

function handleClick(cb) {
  setTimeout(function() {
    display("Clicked, new value = " + cb.checked);
  }, 0);
}

The goal seemed to be to allow the click to complete before looking at the value. As far as I'm aware, there's no reason to do that, and I have no idea why I did. The value is changed before the click handler is called. In fact, the spec is quite clear about that. The version without setTimeout works perfectly well in every browser I've tried (even IE6). I can only assume I was thinking about some other platform where the change isn't done until after the event. In any case, no reason to do that with HTML checkboxes.

Change checkbox value on click

This should do it.

It's working with click event handler also.

$(document).ready(function() {
  $('#my-form .checkbox-value input').click(function() {
    if ($(this).prop("checked")) {
      console.log('yes');
      $(this).val('yes');
    } else {
      console.log('no');
      $(this).val('no');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
  <div id="checkbox" class="checkbox-value">
    <label class="form-label forms-label-hide" for="checkbox_item">Checkboxes</label>
    <ul id="checkbox_item">
      <li class="choice-1 depth-1">
        <input type="checkbox" id="checkbox_item_1" name="my-checkbox" value="no" />
        <label for="checkbox_item_1">Yes, let me know when you have new blogs to share.</label>
      </li>
    </ul>
  </div>

  <div class="">
    <button type="submit">Submit</button>
  </div>
</form>

Javascript checkbox onChange

function calc()
{
  if (document.getElementById('xxx').checked) 
  {
      document.getElementById('totalCost').value = 10;
  } else {
      calculate();
  }
}

HTML

<input type="checkbox" id="xxx" name="xxx" onclick="calc();"/>

Issue with checkbox onchange jquery

As you've mentioned that rows are generated dynamically, You need to use event delegation like this:

$(document.body).on("change",":checkbox", function() {
    if (confirm("Does the status of this survey really changed?")) {
        variable = $(this).val();
        $.post( "handler.php", { handler: '18', value: variable}, location.reload());
    }
});

Where $(document.body) OR $(document) is the container of your target element, you may use closest parent element/container instead of $(document.body) OR $(document).

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

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']")

---

Related Topics