CODEWITHSUNDEEP
javascriptjquery
Steven
Steven

Reputation: 19425

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

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/

Upvotes: 1

Views: 11384

Answers (7)

COVID-MINT
COVID-MINT

Reputation: 25

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

Upvotes: 0

RickyCheers
RickyCheers

Reputation: 344

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

Upvotes: 0

ALWD
ALWD

Reputation: 21

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>

Upvotes: 1

nderjung
nderjung

Reputation: 1617

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.

Upvotes: 1

ipr101
ipr101

Reputation: 24236

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

Upvotes: 1

GaretJax
GaretJax

Reputation: 7780

$(this).val();

or

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

You will be better at searching over SO:

Upvotes: 1

Naftali
Naftali

Reputation: 146300

Use change instead of click

Upvotes: 2

Related Questions