jQuery if checkbox is checked

Question

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>

$('input.checkbox_check').checked returns true if it's checked, false otherwise — Don Cheadle
– Don Cheadle, Commented Oct 27, 2015 at 14:45
@mmcrae, that's incorrect. The jQuery object has no property checked. I think you meant $('input.checkbox_check')[0].checked — Paul
– 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
– Rager, Commented Sep 22, 2022 at 18:34

SLaks · Accepted Answer · 2011-10-31 21:54:56Z

1313

if ($('input.checkbox_check').is(':checked')) {

answered Oct 31, 2011 at 21:54

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Adri w Ukraine Over a year ago

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

Tom Stickel Over a year ago

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

Tom Heaps Over a year ago

another possibility is simply if ($('#my_input:checked))

Alex from Jitbit · Accepted Answer · 2015-04-09 14:58:34Z

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/

edited Apr 9, 2015 at 14:58

answered Apr 21, 2014 at 8:31

Alex from Jitbit

62.3k19 gold badges215 silver badges177 bronze badges

1 Comment

Adri w Ukraine Over a year ago

Note that "The .prop() method gets the property value for only the first element in the matched set." see api.jquery.com/prop

Maher · Accepted Answer · 2023-10-17 13:09:51Z

To verify if it is checked
```
$('#checkboxId').is(':checked') 
```
To check
```
$("#checkboxId").prop('checked', true) 
```

To uncheck

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

Waiyl Karim · Accepted Answer · 2017-02-26 18:43:52Z

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>

user6830821 · Accepted Answer · 2018-11-28 14:46:19Z

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

$( "SELECTOR:checked" ).val() on value="on" gives you "on" if checked and "" if unchecked - useful!

Guihgo · Accepted Answer · 2016-12-24 01:39:40Z

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>

Gass · Accepted Answer · 2023-03-05 18:42:47Z

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>

amota · Accepted Answer · 2021-06-21 15:31:23Z

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

keep elements hidden upon loading page (because checkboxes = unchecked by default), and then
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>

fatemeh sadeghi · Accepted Answer · 2020-10-14 13:47:12Z

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 ...?" >

Meloman · Accepted Answer · 2022-03-21 10:31:07Z

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

Du-Lacoste · Accepted Answer · 2022-12-16 08:13:41Z

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 }

Collectives™ on Stack Overflow

jQuery if checkbox is checked

11 Answers 11

3 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Example

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

3 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Example

Comments

Comments

Comments

Comments

Comments

Linked

Related