How to Use JavaScript to Check if a Checkbox is Checked

Discover how to efficiently determine the state of a checkbox, specifically whether it is checked or not, using JavaScript.

To check if a checkbox is checked, you can inspect the checked property of the element.

For example, if you have the following checkbox in your HTML:

<input type="checkbox" class="checkbox" />

You can check if it is checked using the following JavaScript code:

document.querySelector('.checkbox').checked

Alternatively, you can use the :checked pseudo-class selector in conjunction with the .checkbox class to verify if a checked checkbox exists:

document.querySelector('.checkbox:checked') !== null

However, using the .checked property provides a cleaner solution.

Please note that it is not recommended to use the getAttribute() method to inspect the checked attribute value, as it will always return true if the checkbox is checked by default, as shown in this example:

<input type="checkbox" checked />

Additionally, avoid checking the value of a checkbox element, as it will always be on, regardless of whether the checkbox is checked or not.

Tags: JavaScript, Checkbox, DOM, Web Development