Question
I want to check a checkbox using jQuery with syntax like this:
$(".myCheckBox").checked(true);
or:
$(".myCheckBox").selected(true);
Is there a built-in jQuery method like this for setting a checkbox to checked? If not, what is the correct way to do it?
Short Answer
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.
Concept
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:
Mental Model
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.
Syntax and Examples
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);
Step by Step Execution
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
- The page loads with a checkbox and a button.
- jQuery finds the button with
$("#enable"). .on("click", function () { ... })attaches a click event handler.- When the user clicks the button, the function runs.
$("#newsletter")finds the checkbox element..prop("checked", true)updates the checkbox's current state.- The browser redraws the checkbox as checked.
Traceable state
Before clicking:
Real World Use Cases
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.
Real Codebase Usage
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"));
});
Common Mistakes
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:
selectedis associated with<option>elements in a<select>.- Checkboxes use
checked.
Fix:
$().(, );
Comparisons
| Task | Recommended jQuery approach | Notes |
|---|---|---|
| Check a checkbox | $(selector).prop("checked", true) | Best modern approach |
| Uncheck a checkbox | $(selector).prop("checked", false) | Uses a boolean |
| Read checked state | $(selector).prop("checked") | Returns true or false |
| Old-style attribute approach | $(selector).attr("checked", "checked") | Older pattern, not preferred for live state |
| Toggle checked state | `$(selector).prop("checked |
Cheat Sheet
// 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
checkedfor checkboxes. - Use
.prop()for current live state. - Do not use
.checked(true)or.selected(true). selectedis for<option>elements, not checkboxes..val()does not tell you whether a checkbox is checked.
Quick examples
$("#agree").prop("checked", true);
$().(, );
agreed = $().();
FAQ
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?
Mini Project
Description
Build a small preferences form with checkboxes for app settings such as email alerts, dark mode, and auto-save. This demonstrates how to check, uncheck, read, and synchronize checkbox states using jQuery in a practical UI.
Goal
Create a settings panel where buttons can enable all settings, disable all settings, and display the current checked states.
Requirements
- Add three checkboxes for different settings.
- Add one button to check all settings.
- Add one button to uncheck all settings.
- Add one button to show the current checkbox states.
- Use jQuery
.prop()to read and update checkbox state.
Keep learning
Related questions
Deep Cloning Objects in JavaScript: Methods, Trade-offs, and Best Practices
Learn how to deep clone objects in JavaScript, compare structuredClone, JSON methods, and recursive approaches with examples.
Get Screen, Page, and Browser Window Size in JavaScript
Learn how to get screen size, viewport size, page size, and scroll position in JavaScript across major browsers with clear examples.
How JavaScript Closures Work: A Beginner-Friendly Guide
Learn how JavaScript closures work with simple explanations, examples, common mistakes, and practical use cases for real code.