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/

Answer 1

使用change而不是click

Answer 2

$(this).val();

or

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

You will be better at searching over SO:

• Get checkbox value in jQuery
• How to retrieve checkboxes values in jQuery
• Testing if a checkbox is checked with jQuery

Answer 3

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

Answer 4

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.

Answer 5

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>

Answer 6

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

Answer 7

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