Categories
checkbox html javascript jquery

How do I check whether a checkbox is checked in jQuery?

5028

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery.

For example, if the age checkbox is checked, then I need to show a textbox to enter age, else hide the textbox.

But the following code returns false by default:

if ($('#isAgeSelected').attr('checked')) {
  $("#txtAge").show();
} else {
  $("#txtAge").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">
  Age is selected
</div>

How do I successfully query the checked property?

3

  • It’s important to note everyone, that there is a colon between the opening single quote and the word “checked.” It represents a pseudoclass selector of the checkbox. I just made the mistake of not copying and pasting the code and missed the colon. Frustrating.

    Aug 15, 2014 at 15:16

  • 3

    Starting jquery 1.6 there have been significant changes the way attributes and properties are dealt with. For your case following should work: if($(‘#isAgeSelected’).prop(“checked”)) { $(“#txtAge”).show(); } else { $(“#txtAge”).hide(); } The condition in if statement will simply return true or false depending upon the checked/unchecked state of the check box. For more details refer to attributes vs. properties section on this link.

    – RBT

    Feb 12, 2016 at 18:44


  • 1

    Does this answer your question? How can I check if a checkbox is checked?

    – Liam

    May 13 at 13:51

115

This worked for me:

$get("isAgeSelected ").checked == true

Where isAgeSelected is the id of the control.

Also, @karim79’s answer works fine. I am not sure what I missed at the time I tested it.

Note, this is answer uses Microsoft Ajax, not jQuery

1

  • 2

    The question specifically requests for a jQuery solution.

    Sep 8, 2021 at 0:15

2137

Use jQuery’s is() function:

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked

2

  • 6

    A little bit cleaner solution would be $("#txtAge").toggle($("#isAgeSelected").is(':checked')).

    Jan 6, 2021 at 9:02

  • @KaiNeuwerth IMO it’s not cleaner, just shorter.

    Mar 30 at 20:34

630

Using jQuery > 1.6

<input type="checkbox" value="1" name="checkMeOut" id="checkMeOut" checked="checked" />

// traditional attr
$('#checkMeOut').attr('checked'); // "checked"
// new property method
$('#checkMeOut').prop('checked'); // true

Using the new property method:

if($('#checkMeOut').prop('checked')) {
    // something when checked
} else {
    // something else when not
}

1

  • Doesn’t work if you have a <input type="hidden" value="0" name="checkMeOut"> alongside the checkbox like several frameworks do in order to always submit a value. .is(':checked') on the other hand works in that case.

    Nov 26, 2021 at 11:53