How to Check if a Checkbox Is Checked in jQuery

By the end of this page, you will understand how to correctly check a checkbox's current state in jQuery, why .attr('checked') often causes confusion, and how to use .prop('checked'), .is(':checked'), and event handlers to show or hide elements reliably.

The main concept here is the difference between an HTML attribute and a DOM property.

A checkbox can have:

• an HTML attribute like checked
• a live DOM property called checked

These are related, but not the same thing.

Why .attr('checked') is confusing

attr() reads the attribute written in the original HTML markup. That tells you the checkbox's default state when the page first loads.

<input type="checkbox" checked>

In older jQuery code, people often used .attr('checked'), but that does not reliably represent the current state after the user clicks the checkbox.

Why .prop('checked') is correct

prop() reads the live DOM property, which changes as the user interacts with the checkbox.

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

This returns:

Think of a checkbox like a light switch.

• The attribute is how the switch was installed originally.
• The property is whether the light is actually on right now.

If someone flips the switch after installation, the original installation note does not change. But the real switch state does.

So:

• .attr('checked') asks: Was this marked as checked in the original HTML?
• .prop('checked') asks: Is it checked right now?

When building interactive pages, you almost always care about right now.

Correct syntax

Using .prop('checked')

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

Using .is(':checked')

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

Both are valid. .prop('checked') is often clearer when reading a specific property.

Example with a change event

In practice, you usually want the UI to update whenever the user clicks the checkbox.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></>



  Age is selected

Consider this code:

<input type="checkbox" id="isAgeSelected" />
<div id="txtAge" style="display:none">Age is selected</div>

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

$('#isAgeSelected').on('change', toggleAgeField);
toggleAgeField();

Step by step

1. The page loads.
2. toggleAgeField() runs.
3. jQuery selects #isAgeSelected.
4. .prop('checked') reads the checkbox's current checked state.
5. If the result is , is shown.

Checkbox state checks appear in many common interfaces.

Form logic

• Show a billing address section only if Use different billing address is checked
• Reveal age-related fields only when I want to provide my age is checked
• Enable newsletter preferences only if Subscribe is checked

Validation

• Require extra input only when a checkbox enables that feature
• Skip validation for hidden fields when the option is unchecked

Settings pages

• Show advanced options when Enable advanced mode is checked
• Enable notifications settings when Receive alerts is checked

E-commerce

• Show gift message input when This is a gift is checked
• Display tax or invoice fields when Business purchase is checked

Admin dashboards

• Toggle filters, permissions, or optional configuration sections based on checkboxes

In real projects, developers usually do more than a simple if statement.

Common pattern: extract logic into a function

Instead of repeating the same code, put the checkbox logic in one function.

function updateAgeVisibility() {
  $('#txtAge').toggle($('#isAgeSelected').prop('checked'));
}

Then call it on page load and on change:

updateAgeVisibility();
$('#isAgeSelected').on('change', updateAgeVisibility);

Guard clause style

Some developers prefer early returns for readability.

function updateAgeVisibility() {
  if (!$('#isAgeSelected').prop('checked')) {
    $('#txtAge').hide();
    return;
  }

  $('#txtAge').show();
}

Validation pattern

1. Using .attr('checked') for the current state

Broken example:

if ($('#isAgeSelected').attr('checked')) {
  $('#txtAge').show();
}

Why it is wrong

This reads the HTML attribute, not the live state after user interaction.

Fix

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

2. Checking only once on page load

Broken example:

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

Why it is incomplete

This runs only once. If the user clicks later, nothing updates.

Fix

.prop('checked') vs .is(':checked')

Check checkbox state

$('#myCheckbox').prop('checked')
$('#myCheckbox').is(':checked')

Show or hide based on checkbox

if ($('#myCheckbox').prop('checked')) {
  $('#target').show();
} else {
  $('#target').hide();
}

Short version

$('#target').toggle($('#myCheckbox').prop('checked'));

Update when user changes checkbox

$('#myCheckbox').on('change', function () {
  $('#target').toggle($(this).prop('checked'));
});

Why does .attr('checked') not work as expected in jQuery?

Because it reads the original HTML attribute, not the checkbox's live checked state after the user clicks it.

Should I use .prop('checked') or .is(':checked')?

Either is fine. Both correctly check the current state. .prop('checked') is more direct, while .is(':checked') is often easier to read.

How do I show and hide a div when a checkbox is checked?

Use the checkbox state with .prop('checked') and then call .show(), .hide(), or .toggle().

$('#target').toggle($('#myCheckbox').prop('checked'));

How do I detect checkbox changes in jQuery?

Attach a change event handler.

$('#myCheckbox').on('change',  () {
  .($().());
});

• jQuery selectors — Needed to target the checkbox and the element you want to show or hide.
• DOM properties vs HTML attributes — This is the key idea behind why .prop() works and .attr() can be misleading.
• Event handling in jQuery — Useful for reacting when the checkbox state changes.
• Showing and hiding elements — Common UI behavior with .show(), .hide(), and .toggle().
• Form validation — Checkbox state often determines whether fields are required.
• Boolean logic in JavaScript — Helpful for understanding true, false, and conditional statements.
• jQuery .on() method — The standard way to attach event listeners in jQuery.