Article Categories

Selected Reading

Checking a radio in radio group with JavaScript?

Javascript Web Development Object Oriented Programming

In JavaScript, you can programmatically check a radio button in a radio group by setting its checked property to true. This is useful for form validation, user interactions, or setting default selections dynamically.

HTML Radio Button Group Structure

First, let's look at a typical radio button group structure:

<label>
    Gender:
    <input type="radio" name="gender" value="Male" />Male
    <input type="radio" name="gender" value="Female" checked/>Female
</label>

Method 1: Using getElementsByName()

The most direct approach is to use getElementsByName() to target radio buttons by their name attribute:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Check Radio Button Example</title>
</head>
<body>
    <form>
        <label>
            Gender:
            <input type="radio" name="gender" value="Male" /> Male
            <input type="radio" name="gender" value="Female" checked /> Female
        </label>
        <br><br>
        <button type="button" onclick="checkMale()">Select Male</button>
        <button type="button" onclick="checkFemale()">Select Female</button>
    </form>

    <script>
        function checkMale() {
            var radios = document.getElementsByName('gender');
            for (var i = 0; i < radios.length; i++) {
                if (radios[i].value === 'Male') {
                    radios[i].checked = true;
                    break;
                }
            }
        }

        function checkFemale() {
            var radios = document.getElementsByName('gender');
            for (var i = 0; i < radios.length; i++) {
                if (radios[i].value === 'Female') {
                    radios[i].checked = true;
                    break;
                }
            }
        }
    </script>
</body>
</html>

Method 2: Using querySelector()

A more modern approach uses querySelector() to directly target the radio button:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio Button with querySelector</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>Choose your preference:</legend>
            <input type="radio" id="option1" name="preference" value="JavaScript">
            <label for="option1">JavaScript</label><br>
            
            <input type="radio" id="option2" name="preference" value="Python">
            <label for="option2">Python</label><br>
            
            <input type="radio" id="option3" name="preference" value="Java">
            <label for="option3">Java</label>
        </fieldset>
        <br>
        <button type="button" onclick="selectLanguage('JavaScript')">Select JavaScript</button>
        <button type="button" onclick="selectLanguage('Python')">Select Python</button>
    </form>

    <script>
        function selectLanguage(language) {
            // Direct selection using CSS selector
            var radio = document.querySelector('input[name="preference"][value="' + language + '"]');
            if (radio) {
                radio.checked = true;
                console.log(language + ' has been selected');
            }
        }

        // Alternative: Check selected value
        function getSelectedValue() {
            var selected = document.querySelector('input[name="preference"]:checked');
            return selected ? selected.value : null;
        }
    </script>
</body>
</html>

Method 3: Using getElementById()

If your radio buttons have unique IDs, you can target them directly:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio Button with ID</title>
</head>
<body>
    <form>
        <div>
            <input type="radio" id="small" name="size" value="S">
            <label for="small">Small</label>
        </div>
        <div>
            <input type="radio" id="medium" name="size" value="M">
            <label for="medium">Medium</label>
        </div>
        <div>
            <input type="radio" id="large" name="size" value="L">
            <label for="large">Large</label>
        </div>
        <br>
        <button type="button" onclick="selectSize('medium')">Select Medium</button>
    </form>

    <script>
        function selectSize(sizeId) {
            var radio = document.getElementById(sizeId);
            if (radio) {
                radio.checked = true;
                console.log('Selected size: ' + radio.value);
            }
        }

        // Function to clear all selections
        function clearSelection() {
            var radios = document.getElementsByName('size');
            for (var i = 0; i < radios.length; i++) {
                radios[i].checked = false;
            }
        }
    </script>
</body>
</html>

Comparison of Methods

Method	Best Use Case	Browser Support	Performance
`getElementsByName()`	Multiple radios, same name	All browsers	Good
`querySelector()`	Complex selections	Modern browsers	Excellent
`getElementById()`	Unique ID available	All browsers	Fastest

Key Points

Set checked = true to select a radio button
Only one radio button in a group can be checked at a time
Use name attribute to group radio buttons together
Always check if the element exists before setting properties

Conclusion

JavaScript provides multiple ways to check radio buttons programmatically. Use querySelector() for modern applications or getElementById() when IDs are available for the most efficient selection.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

634 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next