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

Question

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?

• RBT: 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.
• Liam: Does this answer your question? How can I check if a checkbox is checked?

Answer 1

How do I successfully query the checked property?

The checked property of a checkbox DOM element will give you the checked state of the element.

Given your existing code, you could therefore do this:

if(document.getElementById('isAgeSelected').checked) {
 $("#txtAge").show();
} else {
 $("#txtAge").hide();
}

However, there's a much prettier way to do this, using toggle:

$('#isAgeSelected').click(function() {
 $("#txtAge").toggle(this.checked);
});

<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 something</div>

• Marc Compte: This is not an answer to the question. this.checked is not jQuery, as the OP asked for. Also, it only works when user clicks on the checkbox, which is not part of the question. The question is, again, How to check whether a checkbox is checked in jQuery? at any given time with or without clicking the checkbox and in jQuery.
• Andy: How would "is not jQuery" be an argument? That attitude is quite harmful and the reason why it’s so hard to get rid of jQuery nowadays! If you can use vanilla JavaScript from ages ago, which works everywhere and is in no way more complicated to use or longer to write, you should definitely do so.
• John Lord: Not only that but jquery is a javascript extension, and therefore contains all of javascript. . In any case "this" is a jquery object so he's completely wrong anyway.
• Adriano Varoli Piazza: "How would 'is not jquery' be an argument?" Because, while you can indeed use both jquery and plain js on the same script, it's more readable if you use one coding style rather than two. And if you already accepted the jquery tradeoffs, you may as well use it.
• John Lord: People don't code in jquery exclusively. you can't. In any case, jquery isn't a language. It's a library, and you merely have to look at code for checkboxes specifically to see that the programmers can't make up their mind how to set/unset even a simple common control. I just finished fixing one of our site's pages because jquery versions changed and attr no longer worked on checkboxes. javascript doesn't have that problem and the only reason we have jquery at all in our project is it is required by our kendo libraries.

Answer 2

Use jQuery's is() function:

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

• Kai Neuwerth: A little bit cleaner solution would be $("#txtAge").toggle($("#isAgeSelected").is(':checked')).
• Jean-Roch B.: @KaiNeuwerth IMO it's not cleaner, just shorter.
• Anton Duzenko: What does it return when there is no element with such #ID on the page?

Answer 3

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
}

• TheStoryCoder: 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.

Answer 4

jQuery 1.6+

$('#isAgeSelected').prop('checked')

jQuery 1.5 and below

$('#isAgeSelected').attr('checked')

Any version of jQuery

// Assuming an event handler on a checkbox
if (this.checked)

All credit goes to Xian.

• vapcguy: Technically, this.checked is using straight Javascript. But I love that cross-jQuery-version answer!
• TheStoryCoder: 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.

Answer 5

I am using this and this is working absolutely fine:

$("#checkkBoxId").attr("checked") ? alert("Checked") : alert("Unchecked");

Note: If the checkbox is checked it will return true otherwise undefined, so better check for the "TRUE" value.

• sergiol: attr gives undefined for me, but prop seems to work fine.

Answer 6

Use:

<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned
$("#planned_checked").change(function() {
 if($(this).prop('checked')) {
 alert("Checked Box Selected");
 } else {
 alert("Checked Box deselect");
 }
});

 $("#planned_checked").change(function() {
 if($(this).prop('checked')) {
 alert("Checked Box Selected");
 } else {
 alert("Checked Box deselect");
 }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

Answer 7

Since jQuery 1.6, the behavior of jQuery.attr() has changed and users are encouraged not to use it to retrieve an element's checked state. Instead, you should use jQuery.prop():

$("#txtAge").toggle(
 $("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;
 // Return value changes with checkbox state
);

Two other possibilities are:

$("#txtAge").get(0).checked
$("#txtAge").is(":checked")

Answer 8

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

• Kemuel Sanchez: The question specifically requests for a jQuery solution.
• Michael Peterson: Not useful info for the question that specifically asked about jQuery.

Answer 9

If you are using an updated version of jquery, you must go for .prop method to resolve your issue:

$('#isAgeSelected').prop('checked') will return true if checked and false if unchecked. I confirmed it and I came across this issue earlier. $('#isAgeSelected').attr('checked') and $('#isAgeSelected').is('checked') is returning undefined which is not a worthy answer for the situation. So do as given below.

if($('#isAgeSelected').prop('checked')) {
 $("#txtAge").show();
} else {
 $("#txtAge").hide();
}

Answer 10

Use:

<input type="checkbox" id="abc" value="UDB">UDB
<input type="checkbox" id="abc" value="Prasad">Prasad

$('input#abc').click(function(){
 if($(this).is(':checked'))
 {
 var checkedOne=$(this).val()
 alert(checkedOne);
 // Do some other action
 }
})

This can help if you want that the required action has to be done only when you check the box not at the time you remove the check.

Answer 11

You can try the change event of checkbox to track the :checked state change.

$("#isAgeSelected").on('change', function() {
 if ($("#isAgeSelected").is(':checked'))
 alert("checked");
 else {
 alert("unchecked");
 }
});

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

Answer 12

Using the Click event handler for the checkbox property is unreliable, as the checked property can change during the execution of the event handler itself!

Ideally, you'd want to put your code into a change event handler such as it is fired every time the value of the check box is changed (independent of how it's done so).

$('#isAgeSelected').bind('change', function () {
 if ($(this).is(':checked'))
 $("#txtAge").show();
 else
 $("#txtAge").hide();
});

Answer 13

I ran in to the exact same issue. I have an ASP.NET checkbox

<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />

In the jQuery code I used the following selector to check if the checkbox was checked or not, and it seems to work like a charm.

if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

I'm sure you can also use the ID instead of the CssClass,

if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

I hope this helps you.

• Kemuel Sanchez: you can use the css class, as long as you keep in mind that css classes aren't meant to be unique. If you want to respond to changes in a single element then ID would be the preffered way to go.

Answer 14

I believe you could do this:

if ($('#isAgeSelected :checked').size() > 0)
{
 $("#txtAge").show(); 
} else { 
 $("#txtAge").hide();
}

• Kevin Dark: This is the best answer for selecting ONLY those that are checked in the first place. $('#isAgeSelected :checked')

Answer 15

I decided to post an answer on how to do that exact same thing without jQuery. Just because I'm a rebel.

var ageCheckbox = document.getElementById('isAgeSelected');
var ageInput = document.getElementById('txtAge');
// Just because of IE <333
ageCheckbox.onchange = function() {
 // Check if the checkbox is checked, and show/hide the text field.
 ageInput.hidden = this.checked ? false : true;
};

First you get both elements by their ID. Then you assign the checkboxe's onchange event a function that checks whether the checkbox got checked and sets the hidden property of the age text field appropriately. In that example using the ternary operator.

Here is a fiddle for you to test it.

Addendum

If cross-browser compatibility is an issue then I propose to set the CSS display property to none and inline.

elem.style.display = this.checked ? 'inline' : 'none';

Slower but cross-browser compatible.

Answer 16

This code will help you

$('#isAgeSelected').click(function(){
 console.log(this.checked);
 if(this.checked == true) {
 $("#txtAge").show();
 } else {
 $("#txtAge").hide();
 }
});

Answer 17

This works for me:

/* isAgeSelected being id for checkbox */
$("#isAgeSelected").click(function(){
 $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});

Answer 18

There are many ways to check if a checkbox is checked or not:

Way to check using jQuery

if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
if ($(elem).attr('checked'))

Check example or also document:

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

• http://api.jquery.com/prop/

Answer 19

This is some different method to do the same thing:

$(document).ready(function (){
 $('#isAgeSelected').click(function() {
 // $("#txtAge").toggle(this.checked);
 // Using a pure CSS selector
 if ($(this.checked)) {
 alert('on check 1');
 };
 // Using jQuery's is() method
 if ($(this).is(':checked')) {
 alert('on checked 2');
 };
 // // Using jQuery's filter() method
 if ($(this).filter(':checked')) {
 alert('on checked 3');
 };
 });
});

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

Answer 20

Use this:

if ($('input[name="salary_in.Basic"]:checked').length > 0)

The length is greater than zero if the checkbox is checked.

Answer 21

My way of doing this is:

if ( $("#checkbox:checked").length ) { 
 alert("checkbox is checked");
} else {
 alert("checkbox is not checked");
}

Answer 22

$(selector).attr('checked') !== undefined

This returns true if the input is checked and false if it is not.

Answer 23

You can use:

 if(document.getElementById('isAgeSelected').checked)
 $("#txtAge").show(); 
 else
 $("#txtAge").hide();

---

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

Both of them should work.

Answer 24

$(document).ready(function() { 
 $('#agecheckbox').click(function() {
 if($(this).is(":checked"))
 {
 $('#agetextbox').show();
 } else {
 $('#agetextbox').hide();
 }
 });
});

Answer 25

1) If your HTML markup is:

<input type="checkbox" />

attr used:

$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set

If prop is used:

$(element).prop("checked"); // Will give you false whether or not initial value is set

2) If your HTML markup is:

 <input type="checkbox" checked="checked" />// May be like this also checked="true"

attr used:

$(element).attr("checked") // Will return checked whether it is checked="true"

Prop used:

$(element).prop("checked") // Will return true whether checked="checked"

• Graham Laight: This is a REAL problem. My workaround - add a change event to the input: <input type="checkbox" onchange="ChangeChkBox()" /> then use that event to change a boolean JavaScript variable, and use the JavaScript variable instead of querying the checkbox directly.

Answer 26

To act on a checkbox being checked or unchecked on click.

$('#customCheck1').click(function() {
 if (this.checked) {
 console.log('checked');
 } else {
 console.log('un-checked');
 }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="customCheck1">

EDIT: Not a nice programming expression if (boolean == true) though .checked property might return other type variables as well..

It is better to use .prop("checked") instead. It returns true and false only.

• Anupam: Note that this.checked will not work on a Jquery object as outlined here. This would work (i.e $(this).is(":checked"))

Answer 27

This example is for button.

Try the following:

<input type="button" class="check" id="checkall" value="Check All" /> &nbsp; <input type="button" id="remove" value="Delete" /> <br/>
<input type="checkbox" class="cb-element" value="1" /> Checkbox 1 <br/>
<input type="checkbox" class="cb-element" value="2" /> Checkbox 2 <br/>
<input type="checkbox" class="cb-element" value="3" /> Checkbox 3 <br/>
$('#remove').attr('disabled', 'disabled'); 
$(document).ready(function() { 
 $('.cb-element').click(function() {
 if($(this).prop('checked'))
 {
 $('#remove').attr('disabled', false);
 }
 else
 {
 $('#remove').attr('disabled', true);
 }
 }); 
 $('.check:button').click(function()
{
 var checked = !$(this).data('checked');
 $('input:checkbox').prop('checked', checked);
 $(this).data('checked', checked);
 if(checked == true)
 {
 $(this).val('Uncheck All');
 $('#remove').attr('disabled', false);
 }
 else if(checked == false)
 {
 $(this).val('Check All');
 $('#remove').attr('disabled', true);
 }
});
});

Answer 28

The top answer didn't do it for me. This did though:

<script type="text/javascript">
 $(document).ready(function(){
 $("#li_13").click(function(){
 if($("#agree").attr('checked')){
 $("#saveForm").fadeIn();
 }
 else
 {
 $("#saveForm").fadeOut();
 }
 });
 });
</script>

Basically when the element #li_13 is clicked, it checks if the element # agree (which is the checkbox) is checked by using the .attr('checked') function. If it is then fadeIn the #saveForm element, and if not fadeOut the saveForm element.

Answer 29

Though you have proposed a JavaScript solution for your problem (displaying a textbox when a checkbox is checked), this problem could be solved just by css. With this approach, your form works for users who have disabled JavaScript.

Assuming that you have the following HTML:

<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />

You can use the following CSS to achieve the desired functionality:

 #show_textbox:not(:checked) + input[type=text] {display:none;}

For other scenarios, you may think of appropriate CSS selectors.

Here is a Fiddle to demonstrate this approach.

Answer 30

I am using this:

 <input type="checkbox" id="isAgeSelected" value="1" /> <br/>
 <input type="textbox" id="txtAge" />
 $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();