Check if checkbox is checked in jQuery [With Examples]

Alvaro Trigo

Updated on: February 08, 2024

We can check the status of a checkbox by using the :checked jQuery selector together with the jQuery function is. For example: $('#el').is(':checked').

Like on many things in life, there are many ways of doing the same thing, and this case is no different. There are different ways we can check if the checkbox is checked or not, then it’s up to you to choose the one that fits your use case better.

Actually, this same methods are exactly the same methods used to check when a radio button is checked using jQuery.

1. Checking if a checkbox is checked by using `is`

This is actually the way I would recommend for anyone using jQuery:

if( $('#el').is(':checked') ){
    alert("Checkbox Is checked");
}
else{
    alert("Checkbox Is not checked");
}
Code language: JavaScript (javascript)

So how does it work? The is method of jQuery provides us a way to match one or multiple elements against a given selector, jQuery object, or element. It returns true if at least one element matches. Nice uh?

So here we are selecting our checkbox element with $('#el') and asking jQuery if it matches the :checked selector.

2. Checking if a checkbox is checked by using `prop`

jQuery provides a prop method that we can use to get the property of the JavaScript element. Because checked is a JavaScript property of checkbox type of inputs with type=”checkbox”, we can do the following to retrieve it:

// Geting the boolean state
$('#el').prop('checked');
Code language: JavaScript (javascript)

And, as before, we can use the returned boolean in our conditions, assign it to a variable, display it, etc.

If you want to beautify your checkboxes you can’t miss this collection of great CSS checkbox styles.

3. Checking if a checkbox is checked using a selector

Another less elegant way to examine the state of our element is by using the jQuery :checked selector directly on it and then seeing if jQuery retrieves any element. We use the .length method to see how many elements are getting returned.

Then, our condition will be true as long as we have 1 or more elements returned by our selector. And because 0 evaluates to false, if we find 0 elements, the condition won’t pass.

Here’s an example:

// Using the selector directly to see if the selector 
// returns any element
if( $('#el:checked').length) ) {
    alert('Is checked!');
}
Code language: JavaScript (javascript)

4. Checking if a checkbox is checked with JavaScript

Because jQuery is just another layer on top of JavaScript and it provides us a way to access directly the JavaScript object, we can use pure JavaScript to examine the state.

We can access the JavaScript object by using brackets [0] or by using .get(0). Both do exactly the same thing.

Then we just access the checked property directly. It will return a boolean value we can then use as before:

// Using [0]
if( $('#el')[0].checked ){ 
    alert("Checkbox is checked!");
}

// Using get
if( $('#el').get(0).checked ){
    alert("Checkbox is checked!");
}
Code language: JavaScript (javascript)

Don’t use `attr` to check the checkbox status

Do not use the jQuery function attr to check for the current state of a checkbox. This is a common mistake some developers do and that will for sure lead to problems.

The HTML checkbox element, which is basically an input with type="checkbox", can contain an inline attribute to determine if the checkbox will appear checked on page load or not.

<!-- Checked on page load -->
<input type="checkbox" name="test" id="el" checked>

<!-- Unchecked on page load -->
<input type="checkbox" name="test" id="el">
Code language: HTML, XML (xml)

We can access attributes using jQuery when using the attr function. But here’s the deal: the attribute will still be checked even when the user changed it afterward. The attribute doesn’t reflect the state of the checkbox. It only reflects the default value on page load.

So doing the following is a big mistake you want to avoid at all cost:

// DO NOT DO! 
// This will fail when the state of the checbox changes!
if( $('#el').attr('checked') ){
    console.log("Is checked!");
}
Code language: JavaScript (javascript)

Conclusion

No matter what way you choose to check if a checkbox is checked as long as it works for you. Just remember to avoid using the attr option as that will lead to unwanted scenarios.

Now that you’ve learned how to master the jQuery methods to get the state of an HTML element, you can do the same for other HTML elements. Usually, each state attribute has its own JavaScript property that you can access in the same way.