How to check if a checkbox is checked using JavaScript?
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.
→ I wrote 17 books to help you become a better developer:
- C Handbook
- Command Line Handbook
- CSS Handbook
- Express Handbook
- Git Cheat Sheet
- Go Handbook
- HTML Handbook
- JS Handbook
- Laravel Handbook
- Next.js Handbook
- Node.js Handbook
- PHP Handbook
- Python Handbook
- React Handbook
- SQL Handbook
- Svelte Handbook
- Swift Handbook
Also, JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025