532

I have a function below that I want to trigger only when a checkbox in the same tr is checked.

$(".add_menu_item_table").live('click', function() {
  if ($('input.checkbox_check').attr(':checked')); {
    // I want this to trigger.
  }
});
<table id="table-data">
  <tbody>
    <tr>
      <td><input type="checkbox" class="checkbox_check"></td>
      <td><input type="button" class="add_menu_item_table" value="Add"></td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkbox_check"></td>
      <td><input type="button" class="add_menu_item_table" value="Add"></td>
    </tr> 
  </tbody>
</table>

3
  • $('input.checkbox_check').checked returns true if it's checked, false otherwise Commented Oct 27, 2015 at 14:45
  • 1
    @mmcrae, that's incorrect. The jQuery object has no property checked. I think you meant $('input.checkbox_check')[0].checked
    – Paul
    Commented Dec 13, 2016 at 18:15
  • One of those "come on jquery" moments. They could litterally write checked: function(){return this.is(:checked)} and be done with it.
    – Rager
    Commented Sep 22, 2022 at 18:34

11 Answers 11

1306
if ($('input.checkbox_check').is(':checked')) {
3
  • 16
    Code confirmed by jQuery doc, "the cross-browser-compatible way to determine if a checkbox is checked is to use the property: if ( elem.checked ) or if ( $( elem ).prop( "checked" ) ) or if ( $( elem ).is( ":checked" ) ) ". see api.jquery.com/prop
    – Adriano
    Commented May 19, 2014 at 12:14
  • If we are going to be talking about performance then some of these comments should be added directly to the question asked by Clinton, and suggesting that the absolute fastest recommendation would be to add an ID Commented Sep 15, 2015 at 23:01
  • 1
    another possibility is simply if ($('#my_input:checked))
    – Tom Heaps
    Commented Feb 12, 2021 at 16:23
155

for jQuery 1.6 or higher:

if ($('input.checkbox_check').prop('checked')) {
    //blah blah
}

the cross-browser-compatible way to determine if a checkbox is checked is to use the property https://api.jquery.com/prop/

1
  • 9
    Note that "The .prop() method gets the property value for only the first element in the matched set." see api.jquery.com/prop
    – Adriano
    Commented May 19, 2014 at 12:11
90
  • To verify if it is checked

    $('#checkboxId').is(':checked')
    
  • To check

    $("#checkboxId").prop('checked', true)
    
  • To uncheck

    $("#checkboxId").prop('checked', false)
    
0
38

If none of the above solutions work for any reason, like my case, try this:

  <script type="text/javascript">
    $(function()
    {
      $('[name="my_checkbox"]').change(function()
      {
        if ($(this).is(':checked')) {
           // Do something...
           alert('You can rock now...');
        };
      });
    });
  </script>
0
16

If checked:

$( "SELECTOR" ).attr( "checked" )  // Returns ‘true’ if present on the element, returns undefined if not present
$( "SELECTOR" ).prop( "checked" ) // Returns true if checked, false if unchecked.
$( "SELECTOR" ).is( ":checked" ) // Returns true if checked, false if unchecked.

Get the checked val:

$( "SELECTOR:checked" ).val()

Get the checked val numbers:

$( "SELECTOR:checked" ).length

Check or uncheck checkbox

$( "SELECTOR" ).prop( "disabled", false );
$( "SELECTOR" ).prop( "checked", true );
1
  • 1
    $( "SELECTOR:checked" ).val() on value="on" gives you "on" if checked and "" if unchecked - useful!
    – Fanky
    Commented Mar 21, 2020 at 22:03
10

See main difference between ATTR | PROP | IS below:

Source: http://api.jquery.com/attr/

$( "input" )
  .change(function() {
    var $input = $( this );
    $( "p" ).html( ".attr( 'checked' ): <b>" + $input.attr( "checked" ) + "</b><br>" +
      ".prop( 'checked' ): <b>" + $input.prop( "checked" ) + "</b><br>" +
      ".is( ':checked' ): <b>" + $input.is( ":checked" ) + "</b>" );
  })
  .change();
p {
    margin: 20px 0 0;
  }
  b {
    color: blue;
  }
<meta charset="utf-8">
  <title>attr demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
 

 
</body>
</html>

9

You can use the .is(':checked') method which returns true if an element is checked, otherwise it returns false.

Example

$('input').on('click', function(){
  isChecked = $(this).is(':checked')
  
  if(isChecked){ 
    $('html').css('background-color','green')
  }
  else{ 
    $('html').removeAttr('style')
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox"> Try me </label>

1

New to jQuery/Javascript and tried the above solutions. Eventually, this is what worked for me to:

  1. keep elements hidden upon loading page (because checkboxes = unchecked by default), and then
  2. have elements show/hide based on whether the checkbox is checked or not.

It's probably a little ugly/redundant/extraneous syntax-wise, but it works for now!


Note: this all goes in the following <script> tag, right before the </body> tag on your HTML page:

<script type="text/javascript">
   // 'solution code' goes here...
</script>

'solution code':

    $(document).ready(function(){

          // HIDE ELEMENTS UPON PAGE LOAD (CHECKBOX = UNCHECKED)
          if ($([id="show_box"]).is(':checked') == false)
                $("#hiddenDiv").hide();

          // SHOW/HIDE ELEMENTS VIA CHECKBOX STATUS
          $('[id="show_box"]').change(function()
          {
            if ($(this).is(':checked'))
                $("#hiddenDiv").fadeIn();
            else
                $("#hiddenDiv").fadeOut();
          });

    });
  • [id="show_box"] (the checkbox, with id 'show_box')
  • #hiddenDiv (the id of the element I want to hide/show)
  • this (since it's nested, it ends up representing 'show_box')

And here is the HTML code on the page, which the 'solution code' is referring to:

<!-- CHECKBOX -->
<input type="checkbox" id="show_box" name="box" value="">

<!-- ELEMENT THAT SHOWS/HIDES -->
<div id="hiddenDiv"></div>
0

to check input and get confirm by check box ,use this script...

 $(document).on("change", ".inputClass", function () {
    if($(this).is(':checked')){
     confirm_message = $(this).data('confirm');
       var confirm_status = confirm(confirm_message);
                        if (confirm_status == true) {
                           //doing somethings...
                         }
                   }});  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label> check action </lable>
<input class="inputClass" type="checkbox" data-confirm="are u sure to do ...?" >

0

I needed to know this property to automatically check/uncheck "sub-checkboxes" and this is working :

jQuery('.checkbox-parent').click(function(){
    jQuery('.checkbox-child').prop(
        'checked', 
        jQuery('.checkbox-parent').prop('checked')
    ); 
});
0

Following can be done in both JavaScript and jQuery which is pretty simple.

var getVal=$('#isAgeSelected').is(":checked"); // jQuery

var getVal=document.getElementById("isAgeSelected").checked //JavaScript

if (getVal==true) {
// do something
} else {
// do something
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.