How to check if a checkbox is checked using JavaScript?
New Courses Coming Soon
Join the waiting lists
Find out how to check the state of a checkbox, looking if it is checked or not, using JavaScript
Inspect the checked
property of the element.
Say you have this checkbox:
<input type="checkbox" class="checkbox" />
You can see if it’s checked using
document.querySelector('.checkbox').checked
You can also check if looking for .checkbox:checked
does not return null
:
document.querySelector('.checkbox:checked') !== null
but I think looking for .checked
is cleaner.
Do NOT use getAttribute()
looking for the checked
attribute value, because that’s always true if the checkbox is checked by default in this way:
<input type="checkbox" checked />
Also don’t check for the value
of a checkbox element. It’s always on
, regardless whether the checkbox is checked or not.
→ Read my DOM Tutorial on
The Valley of Code
→ Read my
Browser Events Tutorial
on The Valley of Code
→ Read my
Browser APIs Tutorials
on The Valley of Code
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X