Check If Radio Button Is Checked In jQuery [With Examples]

Alvaro Trigo

Updated on: February 08, 2024

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

It is exactly the same method we use to check when a checkbox is checked using jQuery.

1. Checking If A Radio Button Is Checked By Using `is`

This is the best and the most recommended way when using jQuery:

if( $('#radio').is(':checked') ){
    alert("Radio Button Is checked!");
}
else{
    alert("Radio Button Is not checked :( ");
}
Code language: JavaScript (javascript)

What we are doing here is making use of the jQuery is method to check if the provided element matches a given selector, a jQuery object, or an element. It returns true if there’s a match. Cool uh?

So basically we do the selection of our element using $('#radio') (assuming our element uses id="radio") and then we ask jQuery if it matches the :checked selector. (Which will do if the radio is active)

You can play with this simple example:

2. Checking If A Radio Is Checked By Using `prop`

There’s usually more than one way to do things and this case will be no different.

Because jQuery also provides a way to check the properties of HTML elements, we can make use of the prop method to check for the checked property:

// Geting the state property which will be a boolean
$('#radio').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.

3. Checking If A Radio Button Is Checked Using A Selector

Here’s another less recommended way to check the status of a radio button.

It consists of directly using a selector with the :checked property to try to find the active radio button on the DOM. If we don’t find it, that means the element wasn’t active. And if we do find the radio button matching that selector, we can be certain that the radio button is checked.

In order to find out if we found such an element or not, we make use of the .length method to see how many elements are getting returned.

If the element is found, the length function will return 1 (or the number of matched elements) and 0 otherwise.

This means we can use it directly in an if condition as 0 will be treated as false and anything above 0 like a true value.

Here’s an example:

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

Here’s a codepen you can play with:

4. Checking If A Radio Button Is checked with Vanilla JavaScript

jQuery is just a layer on top of JavaScript, which means that anything jQuery can do can also be done in pure JavaScript in one way or another.

If you are using jQuery and want to have access to the JavaScript object for the selected DOM element, all you have to do is select the first element in the jQuery object. We can do so by using [0] or .get(0).

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

However, if you really want to get rid of jQuery, you can select the element directly by using JavaScript by using documet.querySelector if it’s a single element.

Here are all the combinations, being the last the only one that is pure JavaScript.

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

// Using .get()
if( $('#radio').get(0).checked ){
    alert("Radio Button is checked!");
}

// Using Vanilla JavaScript without jQuery
if( document.querySelector('#radio').checked ){
    alert("Radio Button is checked!");
}
Code language: JavaScript (javascript)

Don’t Use `attr` To Check The Radio Button Status

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

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

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

jQuery provides another function called attr that allows us to get the attribute of a given element.

Some developers make use of this method to get the value without realizing that this way we are only getting the initial value of the radio button.

Any changes on its status won’t get reflected on this HTML attribute and therefore using attr to get its state will return incorrect values if the element changes its state dynamically through user interaction or programmatically.

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 radio changes!
if( $('#radio').attr('checked') ){
    console.log("Is checked!");
}
Code language: JavaScript (javascript)

Conclusion On Radio Buttons Status

Choose the way you find more appropriate to check if a radio button is checked. Just make sure to not use the attr option as that will very likely lead to unwanted scenarios. (And if you use it, at least make sure to know why and the possible consequences)

Now you’ve learned the basic methods to check the state of DOM elements. You can apply the same knowledge in order to disable buttons in jQuery, check the status of checkboxes, disable input texts, textareas, etc.