Determine whether a radio button is selected with JavaScript/jQuery

In this post, we will explore different ways of determining whether a radio button is selected or not with JavaScript and jQuery.

1. Using `checked` property

One of the simplest and most intuitive ways of determining whether a radio button is selected or not with JavaScript is by using the checked property of the radio button element. The checked property returns a boolean value that indicates whether the radio button is selected (true) or not (false). For example, suppose we have the following HTML code:

<html>

<body>

<p>Select our preferred contact method:</p>

<div>

<label for="email">Email</label>

<label for="phone">Phone</label>

</div>

<button>Submit</button>

</div>

</body>

</html>

We can use the following JavaScript code to check whether the radio button with id "email" is selected or not:

document.getElementById('submit').onclick = function() {

var email = document.getElementById("email"); // get the email radio button element

var isChecked = email.checked; // get the checked state of the element

alert(isChecked); // print the checked state

}

We can also use the same approach with jQuery by using the prop() function. This function can either get or set the value of a property for the matched elements. We can get the radio button element by its id using the jQuery selector, and then use the prop() function with the checked property, which returns the same value as the checked property of the element. For example, the following jQuery code checks whether the radio button with id "email" is selected or not:

$(document).ready(function() {

$('button').click(function() {

var email = $("#email"); // get the email radio button element

var isChecked = email.prop("checked"); // get the checked state of the element

alert(isChecked); // print the checked state

})

});

2. Using `:checked` selector

Another way to check whether a radio button is selected or not is to use the :checked selector. The :checked selector matches all elements that are checked, such as checkboxes, radio buttons, and option elements. We can use the following JavaScript code to check which radio button with name "contact" is selected:

document.getElementById('submit').onclick = function() {

// Get all the radio button elements by name

var contact = document.getElementsByName("contact");

// Loop through each radio button element

for (var i = 0; i < contact.length; i++) {

// Check if the current radio button element matches the :checked selector

// using matches method

var isSelected = contact[i].matches(":checked");

// Log the result to the console

if (isSelected) {

alert(contact[i].value); // email or phone

}

We can also use the same approach with jQuery by using the .is(selector) function. This function takes a selector, a filter function, or an element as a parameter, and returns true if the current jQuery object matches the parameter, and false otherwise. We can get the radio button element by its id using the jQuery selector, and then use the is() function with the :checked selector, as follows:

$(document).ready(function() {

$('button').click(function() {

var email = $("#email"); // get the email radio button element

var isChecked = email.is(":checked"); // get the checked state of the element

alert(isChecked); // print the checked state

})

});

That’s all about determining whether a radio button is selected in JavaScript and jQuery.

Determine whether a radio button is selected with JavaScript/jQuery

1. Using checked property

2. Using :checked selector

Share this:

1. Using `checked` property

2. Using `:checked` selector