How to set "checked" for a checkbox using jQuery: a detailed breakdown for beginners

Why does the checkbox go crazy? The story of one bug

Imagine: you are writing a registration form on a website. There is a checkbox "I agree to the terms." The user clicks — the checkmark appears. Everything works. Then you decide to add a "Select all" button using jQuery. You write $('#agree').attr('checked', true) — and... nothing happens. Or the checkmark appears once, and then stops being removed. Sound familiar?

This question is one of the most popular on Stack Overflow. Thousands of developers stumble over the same rake. And today we will figure out why this happens, and how to correctly set checked for a checkbox using jQuery.

In short: what's the problem?

The problem is that many beginners (and not only) use the .attr() method to manage the checked attribute. But starting with jQuery 1.6, the correct way is to use .prop(). The difference between an attribute and a property is a key topic that we will now break down.

Attribute vs Property: what's the difference?

Let's put it simply. An HTML attribute is what you write in the markup:

<input type="checkbox" id="agree" checked>

The checked attribute here sets the initial state of the checkbox. But when the user clicks, the property of the DOM element changes, while the attribute remains unchanged.

The .attr() method works with attributes, while .prop() works with properties. And since we are interested in the current state of the checkbox (which changes dynamically), we need .prop().

What it looks like in code

Here is a simple example that demonstrates the difference:

<!-- HTML -->\n<input type="checkbox" id="myCheckbox">\n<button id="setChecked">Set checkmark</button>\n<button id="removeChecked">Remove checkmark</button>\n\n<script>\n// Correct way (jQuery 1.6+)\n$('#setChecked').click(function() {\n    $('#myCheckbox').prop('checked', true);\n});\n\n$('#removeChecked').click(function() {\n    $('#myCheckbox').prop('checked', false);\n});\n</script>

Note: we pass true or false as the second argument — a boolean value. This is important.

Typical beginner mistakes (and how to avoid them)

Mistake 1: Using .attr() to set checked

// ❌ Incorrect\n$('#myCheckbox').attr('checked', true);\n\n// ❌ Also incorrect\n$('#myCheckbox').attr('checked', 'checked');

Why is this bad? Because .attr() sets the attribute, not the property. After the user's first click, the attribute may remain, but the property changes. The result is inconsistent behavior.

Mistake 2: Passing a string instead of a boolean value

// ❌ Incorrect\n$('#myCheckbox').prop('checked', 'true'); // string, not boolean

Does jQuery convert a string to a boolean? In some cases — yes. But relying on this is bad practice. Always pass true or false without quotes.

Mistake 3: Forgetting about .prop() when reading the state

// ❌ Incorrect\nif ($('#myCheckbox').attr('checked')) { ... }\n\n// ✅ Correct\nif ($('#myCheckbox').prop('checked')) { ... }

For reading the current state — only .prop().

Complete example: a form with checkboxes and control buttons

Let's put it all together. Imagine we have a list of options that the user can select, and "Select all" and "Deselect all" buttons.

<!DOCTYPE html>\n<html>\n<head>\n    <title>Managing checkboxes with jQuery</title>\n    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>\n</head>\n<body>\n    <h3