jQuery checkboxes and is checked

Question

When I bind a function to a checkbox element like       myCheckbox   click  function         alert   this  is   checked           The checkbox changes its checked attribute before the event is triggered  this is the normal behavior  and gives an inverse result   However  when I do       myCheckbox   click      The checkbox changes it checked attribute after the event is triggered   My question is  is there a way to trigger the click event from jQuery like a normal click would do  first scenario    PS  I ve already tried with trigger  click

User · Answer

If you anticipate this rather unwanted behaviour, then one away around it would be to pass an extra parameter from the jQuery.trigger() to the checkbox's click handler. This extra parameter is to notify the click handler that click has been triggered programmatically, rather than by the user directly clicking on the checkbox itself. The checkbox's click handler can then invert the reported check status.

So here's how I'd trigger the click event on a checkbox with the ID "myCheckBox". Note that I'm also passing an object parameter with an single member, nonUI, which is set to true:

$("#myCheckbox").trigger('click', {nonUI : true})

And here's how I handle that in the checkbox's click event handler. The handler function checks for the presence of the nonUI object as its second parameter. (The first parameter is always the event itself.) If the parameter is present and set to true then I invert the reported .checked status. If no such parameter is passed in - which there won't be if the user simply clicked on the checkbox in the UI - then I report the actual .checked status:

$("#myCheckbox").click(function(e, parameters) {
   var nonUI = false;
        try {
            nonUI = parameters.nonUI;
        } catch (e) {}
        var checked = nonUI ? !this.checked : this.checked;
        alert('Checked = ' + checked);
    });

JSFiddle version at http://jsfiddle.net/BrownieBoy/h5mDZ/

I've tested with Chrome, Firefox and IE 8.

User · Answer

As of June 2016  using jquery 2 1 4  none of the other suggested solutions work  Checking attr  checked   always returns undefined and is  checked  always returns false    Just use the prop method       checkbox   change function e       if    this  prop  checked         console log  checked

User · Answer

myCheckbox   change function          if    this  prop  checked                 checked         return               not checked       Note  In older versions of jquery it was OK to use attr  Now it s suggested to use prop to read the state

User · Answer

In addition to Nick Craver s answer  for this to work properly on IE 8 you need to add a additional click handler to the checkbox      needed for IE 8 compatibility if    browser msie          myCheckbox   click function       this  trigger  change             myCheckbox   change  function         alert   this  is   checked            Trigger by      myCheckbox   trigger  click   trigger  change      Otherwise the callback will only be triggered when the checkbox loses focus  as IE 8 keeps focus on checkboxes and radios when they are clicked   Haven t tested on IE 9 though

User · Answer

There is a work-around that works in jQuery 1 3 2 and 1 4 2       myCheckbox   change  function         alert   this  is   checked            Trigger by      myCheckbox   trigger  click   trigger  change                   But I agree  this behavior seems buggy compared to the native event

User · Answer

I m still experiencing this behavior with jQuery 1 7 2  A simple workaround is to defer the execution of the click handler with setTimeout and let the browser do its magic in the meantime       myCheckbox   click  function         var that   this      setTimeout function            alert   that  is   checked

User · Answer

lt input id  widget-wpb widget-3-custom date  class  mycheck  type  checkbox  value  d M y  name  widget-wpb widget 3  custom date   unchecked  true  gt       var atrib       mycheck   attr  unchecked  true       mycheck   click function    if    this  is   checked           mycheck   attr  unchecked  false      alert  checkbox checked      else       mycheck   attr  unchecked  true    alert  checkbox unchecked

User · Answer

Well  to match the first scenario  this is something I ve come up with   http   jsbin com uwupa edit  Essentially  instead of binding the  click  event  you bind the  change  event with the alert   Then  when you trigger the event  first you trigger click  then trigger change

User · Answer

personal   click function           if    this  is   checked                  alert  Personal               var validator       register france   validate             validator resetForm                                              JSFIDDLE

User · Answer

checkbox   change function e       if    this  prop  checked         console log  checked

User · Answer

Most fastest and easy way       myCheckbox   change function        alert this checked            el 0  checked     el - is jquery element of selection   Enjoy

User · Answer

checkbox    change function         if   this  is   checked             alert  hi

User · Answer

if    browser msie            myCheckbox   click function       this  trigger  change               myCheckbox   change function             alert   this  is   checked

[jquery] jQuery, checkboxes and .is(":checked")

Examples related to jquery

Examples related to checkbox

Examples related to click

Examples related to ischecked