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/

score 2 · Accepted Answer · answered Jul 29 '11 at 16:30

2

Use change instead of click

answered Jul 29 '11 at 16:30

Naftali

144,921
39
244
303

It doesn't matter is I use `change` or `click`, the result is still the same. See my example here> http://jsfiddle.net/HgQUS/ – Steven Jul 29 '11 at 16:44
1

@Steven -- it works fine, you just had your if statement backwards: http://jsfiddle.net/maniator/HgQUS/4/ – Naftali Jul 29 '11 at 16:48
How can `if(jQuery(this).is(':checked'))` be backwards? Doesn't this controll if a checkbox is checked? – Steven Jul 29 '11 at 16:49
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 Jul 29 '11 at 16:54
Ok, never mind. @Aleks said what I was thinking, that when I click it, it _is_ set to checked :) – Steven Jul 29 '11 at 16:55
@Steven it does check if the checkbox **IS** checked. but you wrote `You have unchecked the checkbox` when it is **is** checked. which is wrong ^_^, it needs to be flipped (which is what i did in my fiddle :-)) – Naftali Jul 29 '11 at 16:55

score 1 · Answer 2 · edited May 23 '17 at 12:26

1

$(this).val();

or

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

You will be better at searching over SO:

edited May 23 '17 at 12:26

Community

1
1

answered Jul 29 '11 at 16:34

GaretJax

7,462
1
38
47

Ah, the `propr` function. Forgot about that. But the result is still the same :( http://jsfiddle.net/HgQUS/2/ It's acting the oposit of what it's supposed to. – Steven Jul 29 '11 at 16:48
1

Check your code, you are triggering the opposite action... :) – GaretJax Jul 29 '11 at 16:51

score 1 · Answer 3 · answered Jul 29 '11 at 16:34

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 '11 at 16:34

ipr101

24,096
8
59
61

score 1 · Answer 4 · answered Jul 29 '11 at 16:37

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 '11 at 16:37

nderjung

1,607
4
17
38

Tried that as well, doesn't work: http://jsfiddle.net/HgQUS/1/ Fore some reason it's acting the oposite of what it's supposed to do. – Steven Jul 29 '11 at 16:47
1

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. http://jsfiddle.net/HgQUS/5/. :3 – nderjung Jul 29 '11 at 16:50
The html spec defines the content of the checked attribute as "checked", not "true": http://www.w3.org/TR/html4/interact/forms.html#edef-INPUT – GaretJax Jul 29 '11 at 16:55
@Aleks - Ah yea. I was thinking that could be the case, but I was not sure. – Steven Jul 29 '11 at 16:55
@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. – nderjung Jul 29 '11 at 16:59
@Steven. Hope it's all okay now ^_^ – nderjung Jul 29 '11 at 17:00

score 1 · Answer 5 · answered Jul 29 '11 at 16:45

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>

COVID-MINT · Answer 6 · 2020-10-11T00:33:03.047

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

score 0 · Answer 7 · answered Jul 29 '11 at 17:31

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

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

7 Answers7