How can I check whether a radio button is selected with JavaScript?

getElementById for Vitamin D(id) checking

The getElementById method provides a handy way to check if a particular radio button is selected, or enjoying its time unchecked:

const radio = document.getElementById('element_id');
if (radio.checked) {
    console.log('This radio button is basking in attention!');
} else {
    console.log('The radio button remains undisturbed. Kinda lonely, though.');
}


Magic of querySelector: Be Specific and Efficient!

You can avoid the traditional loops for thorough validation by employing the power of querySelector:

const checkedRadio = document.querySelector('input[type="radio"][name="radioGroup"]:checked');
const value = checkedRadio ? checkedRadio.value : null;
console.log(value ? `Selected value: ${value} (Who's the selected one now!)` : 'No radio button selected. (The suspense continues...)');


The Sherlock Holmes approach : Server-side Validation

JavaScript is your Watson on client-side but ensure you have Sherlock doing server-side validation. See the radio button value in the request string to ensure data integrity.

Edge case handling: No Margin for Error!

Girlfriend approach: At least one default selected

Set a default selection in HTML to ensure one radio button always remains pre-engaged:

<input type="radio" name="radioGroup" value="1" checked> Option 1
<input type="radio" name="radioGroup" value="2"> Option 2


Drama King: No selection made, Alert Comes!

Should handle the case where no buttons are selected, invoke the majestic dialog, or disable form submission:

if (!document.querySelector('input[type="radio"][name="radioGroup"]:checked')) {
    alert('Please select a radio button. They feel left out.');
}


Quote Marks and CSS selectors: A love story

While using querySelector with specific attributes, be a cupid, use quotes:

// Incorrect: A sad love story, no quote marks
const radio = document.querySelector(input[type=radio][name=radioGroup]:checked);
// Correct: Love blossoms with quote marks
const radio = document.querySelector('input[type="radio"][name="radioGroup"]:checked');


Option Available: jQuery selection

For people comfortable with jQuery, selecting a checked radio button is as easy as saying jQuery:

const checkedValue = $('input[name="radioGroup"]:checked').val();
console.log(checkedValue ? `Selected value: ${checkedValue} (Victory is sweet!)` : 'No radio button selected. (Try again, champ!)');


Note: Channel your inner library spirit and include the jQuery library for these methods to work!