Check if any of the radio button is selected on form submit

This post will discuss how to check if any of the radio button is selected on submitting the form in JavaScript and jQuery.

1. Using jQuery

The basic idea is to use the :checked CSS pseudo-class selector which can represent any radio (<input type="radio">) that is checked. We can use this in many ways with jQuery:

1. Using `is()` function

We can use .is(selector), which matches against a selector expression. For example, suppose we have the following HTML code:

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

<div>

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

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

</div>

<button id="submit">Submit</button>

</div>

The following code uses .is() inside an event handler and returns true if any radio button is selected.

$(document).ready(function() {

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

if ($('input[type=radio][name=contact]:checked').is(':checked')) {

alert('Thank you for submitting your preference.');

}

else {

alert('Please select your preferred contact method!');

}

})

});

Edit in JSFiddle

2. Using `val()` function

The .val() method can be used to get the value of matched radio elements. When no options are selected, it returns an undefined value.

$(document).ready(function() {

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

if ($('input[type=radio][name=contact]:checked').val()) {

alert('Thank you for submitting your preference.');

}

else {

alert('Please select your preferred contact method!');

}

})

});

Edit in JSFiddle

3. Using `length` property

Alternatively, we can simply check the length property returned by the attributeEquals selector.

$(document).ready(function() {

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

if ($('input[type=radio][name=contact]:checked').length > 0) {

alert('Thank you for submitting your preference.');

}

else {

alert('Please select your preferred contact method!');

}

})

});

Edit in JSFiddle

2. Using JavaScript

In plain JavaScript, we can loop through each <radio> button using for…of loop:

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

var selected = false;

var radios = document.getElementsByName('contact');

for (var radio of radios) {

if (radio.type === 'radio' && radio.checked) {

alert('Thank you for submitting your preference.');

selected = true;

}

if (!selected) {

alert('Please select your preferred contact method!');

}

Edit in JSFiddle

Or we can use the querySelector() method to access the matched element.

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

var radios = document.querySelector('input[type=radio][name=contact]:checked');

if (!!radios) {

alert('Thank you for submitting your preference.');

}

else {

alert('Please select your preferred contact method!');

}

Edit in JSFiddle

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

Check if any of the radio button is selected on form submit

1. Using jQuery

1. Using is() function

2. Using val() function

3. Using length property

2. Using JavaScript

Share this:

1. Using `is()` function

2. Using `val()` function

3. Using `length` property