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

Solution 1

$('#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.

Solution 2

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.

Solution 3

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

Solution 4

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

Solution 5

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

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

View more solutions

Comments

[Ben]

I've tried that, "$(#myCheckbox).click()" unchecks/checks the box but the change function is never triggered. I've also tried changing the 'checked' attribute instead of calling click() and even setting the 'change' function to 'live'.

[Nick Craver]

@Ben - You have to trigger it in a different way to get this to run, see my answer for the trigger statement.

[Ben]

@Nick Thanks, I will accept tcurdt answer as he was the first to come out with the solution. Silly me i didn't triggered the 'change' method.

[danski]

and for newer versions of jquery the function is prop("checked") instead of attr("checked") in case that catches anyone else out.

[vapcguy]

I would avoid 'prop' due to non-backwards-compatibility, esp. in IE.

[vapcguy]

Yep! A little offtopic, but I had to do the same in Kendo grids with checkboxes when someone clicked "Add new record" if I wanted it to be "Active" by default. I had to also give it a time of 500ms. Then I had to add .click(), then set .attr('value', 'true'), then .change(), then .blur() before it would programmatically set the box when I clicked the "Update" button programmatically....

[Danil Gaponov]

Some comments would be nice

[atomless]

This no longer works. Binding to the change event is right but attr('checked') returns undefined regardless of the checked state of the checkbox input.

[dhaupin]

is('checked) will return false because "checked" is not a CSS pseudo selector. The correct one should be is(':checked') so it looks for ":checked" instead.

[Robb Sadler]

per @danski's comment, you need to use prop() for newer jQuery. I don't believe this is a backward compatibility issue, as you specify which version of jquery you wish to use on your site.