How can I check if a checkbox is checked on click?

Question

I need to trigger some code when I click a checkbox based on if a checkbox is checked or not. But for some reason, .is(':checked') is always triggered.

This is my code.

  jQuery('#selectlist input[type=checkbox]').live('click',function(){
    var select_id = jQuery(this).attr('id');

    if(jQuery(this).is(':checked')) {
      alert('You have unchecked the checkbox');
      // Remove some data from variable
    } else {
      alert('You have checked the checkbox');
      //Add data to variable
    }
  }

UPDATE
I've added an example on JSFiddle: http://jsfiddle.net/HgQUS/

Naftali · Accepted Answer · 2011-07-29 16:30:37Z

2

Use change instead of click

answered Jul 29, 2011 at 16:30

Naftali

147k41 gold badges247 silver badges304 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Steven Over a year ago

It doesn't matter is I use change or click, the result is still the same. See my example here> jsfiddle.net/HgQUS

Naftali Over a year ago

@Steven -- it works fine, you just had your if statement backwards: jsfiddle.net/maniator/HgQUS/4

Steven Over a year ago

How can if(jQuery(this).is(':checked')) be backwards? Doesn't this controll if a checkbox is checked?

Steven Over a year ago

Yes I get that. I just don't understand the logic behind the if(jQuery(this).is(':checked')). To me this should check if the checkbox is checked. Or is my logic all wrong here?

Steven Over a year ago

Ok, never mind. @Aleks said what I was thinking, that when I click it, it is set to checked :)

|

Community · Accepted Answer · 2017-05-23 12:26:52Z

1

$(this).val();

or

$(this).prop('checked'); # on jquery >= 1.6

You will be better at searching over SO:

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Jul 29, 2011 at 16:34

GaretJax

7,8491 gold badge41 silver badges47 bronze badges

2 Comments

Steven Over a year ago

Ah, the propr function. Forgot about that. But the result is still the same :( jsfiddle.net/HgQUS/2 It's acting the oposit of what it's supposed to.

GaretJax Over a year ago

Check your code, you are triggering the opposite action... :)

ipr101 · Accepted Answer · 2011-07-29 16:34:11Z

1

this.checked

Should tell you if the checkbox is checked or not although this is just javascript so you won't be able to call it on a 'jquery' element. For example -

<input type="checkbox" id="checky">
$("#checky")[0].checked

answered Jul 29, 2011 at 16:34

ipr101

24.2k8 gold badges61 silver badges62 bronze badges

Comments

nderjung · Accepted Answer · 2011-07-29 16:37:55Z

1

If the input has the checked attribute, then it is obviously checked, it is removed if it is not checked.

if ($(this).attr("checked")) {
    // return true
}
else {
    // return false
}

However, you can adapt the above code to check if the attribute, if it is not removed and instead set to true/false, to the following:

if ($(this).attr("checked") == "true") {
    // return true
}
else {
    // return false
}

Additionally, I see you use jQuery as an operator for selectors, you can just use the dollar, $, symbol as that is a shortcut.

answered Jul 29, 2011 at 16:37

nderjung

1,6274 gold badges17 silver badges38 bronze badges

6 Comments

Steven Over a year ago

Tried that as well, doesn't work: jsfiddle.net/HgQUS/1 Fore some reason it's acting the oposite of what it's supposed to do.

nderjung Over a year ago

That is because you are using it the wrong way around xD - The statement you have written checks if the checkbox has been changed, as it sets the checked attribute, then runs the if statement. So what you want to do is just swap the content. jsfiddle.net/HgQUS/5. :3

GaretJax Over a year ago

The html spec defines the content of the checked attribute as "checked", not "true": w3.org/TR/html4/interact/forms.html#edef-INPUT

Steven Over a year ago

@Aleks - Ah yea. I was thinking that could be the case, but I was not sure.

nderjung Over a year ago

@GaretJax, I did say that the first statement I wrote was for that, however I haves seen (mostly Internet Explorer related) cases of the checked attribute being used as a boolean.

|

ALWD · Accepted Answer · 2011-07-29 16:45:04Z

1

I flipped-flopped the alerts, and it works for me:

<script type="text/javascript">
  jQuery('#selectlist input[type=checkbox]').live('click',function(){
    var select_id = jQuery(this).attr('id');

    if(jQuery(this).is(':checked')) {
            alert('You have checked the checkbox');
      // Remove some data from variable
    } else {
            alert('You have unchecked the checkbox');
      //Add data to variable
    }
  });

</script>

answered Jul 29, 2011 at 16:45

ALWD

213 bronze badges

Comments

RickyCheers · Accepted Answer · 2011-07-29 17:31:43Z

0

Your "if" syntax is not correct.

jQuery('#selectlist_categories input[type=checkbox]').live('click',function(){
    var cat_id = jQuery(this).attr('id');

    // if the checkbox is not checked then alert "You have unchecked the checkbox"
    if(!jQuery(this).is(':checked')) {
      alert('You have unchecked the checkbox');
    } else {
      //else alert "You have checked the checkbox"
      alert('You have checked the checkbox');
    }
  });

answered Jul 29, 2011 at 17:31

RickyCheers

3443 silver badges6 bronze badges

Comments

COVID-MINT · Accepted Answer · 2020-10-11 00:33:03Z

if you're confused about why it says unchecked when you check it. There is nothing wrong with your code you can just switch the unchecked and checked with each other in the alerts like this:

$('#selectlist_categories input[type=checkbox]').on('change',function(){
     var cat_id = $(this).attr('id');
     let cat_idText = $("input[type=checkbox]:checked").val();
    
     if(jQuery(this).is(':checked')) {
       alert('You have checked the checkbox' + " " + `${cat_idText}`); 
     } else {
       alert('You have unchecked the checkbox'); 
     }
});

PS: I have updated the script to work in jQuery 3.5.1 the original with the live() only works on jQuery 1.7 since it was removed in 1.9 to instead use on() and on jQuery 3.5.1 you can use $ instead of jQuery and the val() function works on all versions because it added in jQuery 1.0

Or in a nice better fashion correct the if statement as RickyCheers said adding the ! before jQuery or $ which then the if statement will turn it into a if jQuery Element is not checked

$('#selectlist_categories input[type=checkbox]').on('click',function(){
     var cat_id = $(this).attr('id');
    
     if(!jQuery(this).is(':checked')) {
       alert('You have unchecked the checkbox');
     } else {
       alert('You have checked the checkbox');
     }
});

Collectives™ on Stack Overflow

How can I check if a checkbox is checked on click?

7 Answers 7

6 Comments

2 Comments

Comments

6 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

6 Comments

2 Comments

Comments

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related