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:

• true if the checkbox is currently checked
• false if it is not

Another common option: .is(':checked')

jQuery also provides a readable selector-based approach:

$('#isAgeSelected').is(':checked')

This also returns true or false based on the current state.

Why this matters

In real programs, UI elements often depend on user input:

• show extra fields when a checkbox is enabled
• enable or disable form sections
• conditionally submit data
• validate only when an option is selected

If you read the wrong value, your interface behaves incorrectly. Using the current checkbox state is essential for accurate logic.

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"></script>

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

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

// Run once when the page loads
toggleAgeField();

// Run again whenever the checkbox changes
$('#isAgeSelected').on('change', toggleAgeField);
</script>

What this example does

• toggleAgeField() checks the checkbox state
• if checked, it shows #txtAge
• otherwise, it hides #txtAge
• the function runs once on page load and again every time the checkbox changes

This is the most practical pattern for real use.

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 true, #txtAge is shown.
6. If the result is false, #txtAge is hidden.
7. Then a change event listener is attached to the checkbox.
8. When the user checks or unchecks it, toggleAgeField() runs again.
9. The UI updates immediately to match the new state.

Small trace

If the checkbox starts unchecked:

• .prop('checked') returns false
• #txtAge stays hidden

If the user checks it:

• change event fires
• .prop('checked') now returns true
• #txtAge becomes visible

If the user unchecks it:

• change event fires again
• .prop('checked') returns false
• #txtAge is hidden again

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

Checkboxes often control whether a field should be required.

function validateForm() {
  if ($('#isAgeSelected').prop('checked') && $('#ageInput').val().trim() === '') {
    alert('Please enter your age.');
    return false;
  }

  return true;
}

Toggle shorthand

jQuery's .toggle() can make this cleaner:

$('#txtAge').toggle($('#isAgeSelected').prop('checked'));

That means:

• show the element if the condition is true
• hide it if the condition is false

Event-driven UI

Real codebases usually update UI from events instead of checking once and stopping.

Common events:

• change for checkboxes and selects
• input for text fields
• submit for forms

That keeps the interface in sync with user actions.

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

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

3. Forgetting to wait until the DOM exists

If your script runs before the checkbox element is loaded, jQuery may not find it.

Fix

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

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

4. Confusing value with checked

Broken example:

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

Why it is wrong

val() gives the checkbox value attribute, not whether it is checked.

Fix

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

5. Using the wrong selector

Broken example:

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

If the ID does not match, the selection is empty and your logic fails.

Fix

Double-check that the selector matches the HTML exactly.

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

Both are correct in modern jQuery.

.show() / .hide() vs .toggle()

If your only goal is show-or-hide based on a boolean, .toggle(condition) is often the simplest choice.

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

Run on page load too

function updateUI() {
  $('#target').toggle($('#myCheckbox').prop('checked'));
}

updateUI();
$('#myCheckbox').on('change', updateUI);

Avoid

$('#myCheckbox').attr('checked')
$('#myCheckbox').val()

Rule of thumb

• Use .prop('checked') for the live state
• Use .is(':checked') if you prefer readable selector syntax
• Use change events for interactive UI updates

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', function () {
  console.log($(this).prop('checked'));
});

Does this work for multiple checkboxes?

Yes, but you may need to loop through them or use selectors like $('input[type="checkbox"]:checked') depending on your goal.

Can I set a checkbox as checked with jQuery?

Yes.

$('#myCheckbox').prop('checked', true);

To uncheck it:

$('#myCheckbox').prop('checked', false);

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