Check if an HTML Checkbox is checked using Javascript

While processing forms in web development, it’s a common requirement to be able to tell if a checkbox has been checked or not.

It’s not immediately obvious though. Let’s dispell this and provide some ways to check if a checkbox is checked using Javascript.

First, we need an HTML checkbox to play around with.

1

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

Using Javascript

Using regular Javascript, we can tell if it is checked by using the following Javascript:

1

document.querySelector(".myCheckbox").checked

You can also use a Query Selector Pattern to tell if a value matches as follows:

1

var checked = document.querySelector(".myCheckbox:checked")!==null ? true: false;

Using jQuery

jQuery comes with quite a nice way to do this using the is() method.

1
2
3
4
5

if ( $(".myCheckbox").is(":checked") ) {
    // Is checked
} else {
    // Is NOT checked
}