How to Set a Checkbox as Checked in jQuery

By the end of this page, you will understand how to check and uncheck checkboxes in jQuery, why .checked(true) and .selected(true) do not exist, and why .prop("checked", true) is the correct modern approach. You will also learn how this differs from .attr(), how to read checkbox state, and how this pattern is used in real code.

Checkboxes in HTML have a checked state. In JavaScript and jQuery, that state is handled as a DOM property, not as a custom jQuery method.

That is why code like this does not work:

$(".myCheckBox").checked(true);

jQuery does not provide a .checked() or .selected() method for checkboxes.

The correct way is:

$(".myCheckBox").prop("checked", true);

Why .prop() matters

A checkbox has a live state in the browser:

• checked
• unchecked

That live state is stored in the element's property.

So when you want to:

• check a checkbox
• uncheck a checkbox
• read whether it is currently checked

use .prop().

Why this matters in real programming

Checkboxes are common in forms, filters, settings panels, and admin tools. You often need to:

Think of a checkbox like a light switch.

• The HTML markup is like how the switch was installed originally.
• The DOM property is whether the switch is currently on or off.

.attr() is closer to reading the original installation note.

.prop() is checking the actual current switch position.

If you want to turn the light on right now, you change the property, not the original note about how it started.

Basic syntax

$(selector).prop("checked", true);   // check
$(selector).prop("checked", false);  // uncheck

Check one checkbox

$(".myCheckBox").prop("checked", true);

This finds elements with the class myCheckBox and sets their checked property to true.

Uncheck a checkbox

$(".myCheckBox").prop("checked", false);

Read the current checked state

const isChecked = $(".myCheckBox").prop("checked");
console.log(isChecked);

Consider this example:

<input type="checkbox" id="newsletter">
<button id="enable">Enable subscription</button>

$("#enable").on("click", function () {
  $("#newsletter").prop("checked", true);
});

Step by step

1. The page loads with a checkbox and a button.
2. jQuery finds the button with $("#enable").
3. .on("click", function () { ... }) attaches a click event handler.
4. When the user clicks the button, the function runs.
5. $("#newsletter") finds the checkbox element.
6. .prop("checked", true) updates the checkbox's current state.
7. The browser redraws the checkbox as checked.

Traceable state

Before clicking:

Pre-filling saved user settings

If a user previously enabled email notifications, your page can load that saved preference and mark the checkbox as checked.

$("#emailAlerts").prop("checked", true);

Select all items in a table

Admin dashboards often include a master checkbox that checks every row.

$("#selectAll").on("click", function () {
  $(".rowCheckbox").prop("checked", true);
});

Applying filters in search interfaces

A shopping or search page may check filters based on URL parameters or stored preferences.

Enabling terms acceptance in demos or tests

Automated test setups or demo tools may need to programmatically set checkbox state.

Syncing UI with API data

If an API returns a value like subscribed: true, your front end can reflect it in a checkbox.

In real projects, developers rarely set checkbox state in isolation. It is usually part of a broader UI or validation flow.

Common patterns

Guard clauses before changing state

if (!userData) return;
$("#isAdmin").prop("checked", userData.isAdmin);

This avoids errors if the data has not loaded yet.

Using boolean values directly

$("#darkMode").prop("checked", settings.darkModeEnabled);

This is clean and readable because settings.darkModeEnabled is already true or false.

Select all / deselect all

$("#master").on("change", function () {
  $(".item").prop("checked", $(this).prop("checked"));
});

Using a method that does not exist

Broken code:

$(".myCheckBox").checked(true);

Why it fails:

• jQuery has no .checked() method.

Fix:

$(".myCheckBox").prop("checked", true);

Confusing selected with checked

Broken code:

$(".myCheckBox").selected(true);

Why it fails:

• selected is associated with <option> elements in a <select>.
• Checkboxes use checked.

Fix:

$().(, );

// Check a checkbox
$(selector).prop("checked", true);

// Uncheck a checkbox
$(selector).prop("checked", false);

// Read current state
$(selector).prop("checked");

// Toggle state
$(selector).prop("checked", !$(selector).prop("checked"));

Key rules

• Use checked for checkboxes.
• Use .prop() for current live state.
• Do not use .checked(true) or .selected(true).
• selected is for <option> elements, not checkboxes.
• .val() does not tell you whether a checkbox is checked.

Quick examples

$("#agree").prop("checked", true);
$().(, );
 agreed = $().();

Is there a jQuery .checked(true) method?

No. jQuery does not include a .checked() method. Use .prop("checked", true) instead.

How do I uncheck a checkbox in jQuery?

Use:

$(selector).prop("checked", false);

Should I use .attr() or .prop() for checkboxes?

Use .prop() for the current checked state. .attr() is older and refers to the HTML attribute rather than the live state.

How do I test whether a checkbox is checked?

Use:

$(selector).prop("checked")

This returns true or false.

What is the difference between checked and selected?

• DOM properties: Important because checked is a property, not just an HTML attribute.
• jQuery selectors: Needed to target the correct checkbox or group of checkboxes.
• Event handling in jQuery: Often used with checkbox clicks and change events.
• Form handling: Checkboxes are a core part of collecting and validating form input.
• HTML input elements: Helps explain how checkboxes differ from text fields, radios, and selects.
• attr() vs prop(): Closely related because beginners often confuse them.
• Radio buttons: Similar to checkboxes, and they also use the checked property.