javascript - How can I check if a checkbox is checked on click? - Stack Overflow

admin管理员组

文章数量:1302940

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: /

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/HgQUS/

• javascript
• jquery

Share Improve this question Follow edited Jul 29, 2011 at 16:45 Steven asked Jul 29, 2011 at 16:27 StevenSteven 19.5k4949 gold badges155155 silver badges263263 bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 2

Use change instead of click

$(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

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

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.

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>

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

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

本文标签： javascriptHow can I check if a checkbox is checked on clickStack Overflow