How to Check a Radio Button with jQuery

Introduction

Working with radio buttons in jQuery can be a bit tricky if you're not familiar with the syntax and methods involved. In this Byte, we'll cover how to check a radio button using jQuery, explore other ways to accomplish this task, and finally, show you how to verify if a radio button is checked.

Checking a Radio Button with jQuery

The most straightforward way to check a radio button with jQuery is by using the .prop() method. This method gets the property value for only the first element in the matched set. It returns undefined for values of elements that have not been set.

Here's an example:

$('input[name="radioButtonName"]').prop('checked', true);

In this example, we're using the jQuery selector to find an input element with the name "radioButtonName" and then using the .prop() method to set its 'checked' property to true.

Other Ways to Check a Radio Button with jQuery

Aside from the .prop() method, you can also use the .attr() method to check a radio button. The .attr() method sets or returns attributes and values of the selected elements.

Here's how you can use it:

$('input[name="radioButtonName"]').attr('checked', 'checked');

Note:

While both .prop() and .attr() can be used to check a radio button, you should know that there are some differences between these methods. The .prop() method gets the property value for only the first element in the matched set, while .attr() gets the attribute value for only the first element in the matched set.

In jQuery, .attr() gets or sets the actual HTML attribute, which doesn't change even if you manipulate the element's property via JavaScript. On the other hand, .prop() interacts with the DOM properties of the element, which are dynamically updated and represent the current state of the element. It's kind of like .attr() gives you the blueprint, while .prop() shows you the live status.

Check if a Radio Button is Checked

To verify if a radio button is checked, you can use the :checked selector. This selector selects all elements that are checked or selected.

Here's an example:

if ($('input[name="radioButtonName"]').is(':checked')) {
    console.log("The radio button is checked.");
} else {
    console.log("The radio button is not checked.");
}

Here we're using the .is() method with the :checked selector to check if the radio button is checked. If it is, we print "The radio button is checked." to the console; otherwise, we print "The radio button is not checked."

Conclusion

In this Byte, we've covered a few ways to check a radio button using jQuery and how to verify if a radio button is checked. As a web developer, you'll likely need to understand these methods as this is a pretty common task to do.