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:

• preselect options from saved data
• toggle a checkbox based on user actions
• read checkbox values before form submission
• implement "Select all" behavior

Understanding the difference between an HTML attribute and a DOM property helps you avoid bugs where the UI and your code get out of sync.

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

Example with a button

<input type="checkbox" class="myCheckBox">
<button id="tickBtn">Check it</button>
<button id="untickBtn">Uncheck it</button>

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

$("#untickBtn").on("click", function () {
  $(".myCheckBox").prop("checked", false);
});

When the first button is clicked, the checkbox becomes checked. When the second button is clicked, it becomes unchecked.

Older code you may see

$(".myCheckBox").attr("checked", "checked");

This appears in older jQuery code, but for modern jQuery, .prop("checked", true) is the preferred and more accurate approach for checkbox state.

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:

$("#newsletter").prop("checked"); // false

After clicking:

$("#newsletter").prop("checked"); // true

The important idea is that the checkbox's live state changes immediately when the property changes.

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

This mirrors the master checkbox state to all item checkboxes.

Validation before form submission

if (!$("#terms").prop("checked")) {
  alert("You must accept the terms.");
  return;
}

Triggering related logic

Sometimes checking a box should also trigger other code:

$("#sendEmails").prop("checked", true).trigger("change");

This is useful when the rest of the app listens for the change event.

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:

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

Using .attr() for live state

Potentially confusing code:

$(".myCheckBox").attr("checked", "checked");

Why to avoid it:

• .attr() deals with attributes in the HTML markup.
• .prop() reflects the current live state in the browser.

Preferred fix:

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

Forgetting that a class selector may match multiple checkboxes

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

This checks all elements with that class.

If you only want one checkbox, use a more specific selector:

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

Expecting .val() to tell you whether a checkbox is checked

Broken idea:

$("#newsletter").val();

Why it is wrong:

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

Use this instead:

$("#newsletter").prop("checked");

// 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);
$("#agree").prop("checked", false);
const agreed = $("#agree").prop("checked");

Edge cases

• If the selector matches multiple checkboxes, all of them will be updated.
• If other code depends on checkbox changes, you may also need:

$("#agree").prop("checked", true).trigger("change");

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?

• checked is for checkboxes and radio buttons.
• selected is for <option> elements inside a <select>.

Why does my code affect multiple checkboxes?

Because your selector matches multiple elements, such as a class selector like .myCheckBox. Use a more specific selector if needed.

Do I need to trigger change manually?

Not always. But if other code listens for the checkbox change event, you may need to call .trigger("change") after updating it programmatically.

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