Check Whether a Radio Button is Selected With JavaScript

Last Updated : 07 Jun, 2025

Here are the different methods used to check the radio button is selected:

1. Using Input Radio checked property

The checked property in JavaScript checks if a radio button is selected. By using document.getElementById or querySelector to get the radio button, the checked property returns true if the button is selected, and false if it is not.

html

<html>
<head></head>
<body>
    <h1 style="color:blue;">
        Check if a Radio Button is Selected
    </h1>

    <h3>
        Click the button to check if any radio button is selected.
    </h3>

    <form>
        <input type="radio" name="language" id="Python" value="Python"> Python<br>
        <input type="radio" name="language" id="Java" value="Java"> Java<br>
        <input type="radio" name="language" id="C++" value="C++"> C++<br><br>

        <button type="button" onclick="checkSelection()">Check Selection</button>
    </form>

    <br>

    <div id="result" style="color:green; font-size:18px; font-weight:bold;">
    </div>

    <script>
        function checkSelection() {
            if (document.getElementById('Python').checked) {
                document.getElementById("result").innerHTML =
                    "Python radio button is selected.";
            }
            else if (document.getElementById('Java').checked) {
                document.getElementById("result").innerHTML =
                    "Java radio button is selected.";
            }
            else if (document.getElementById('C++').checked) {
                document.getElementById("result").innerHTML =
                    "C++ radio button is selected.";
            }
            else {
                document.getElementById("result").innerHTML =
                    "No radio button is selected.";
            }
        }
    </script>
</body>

</html>

Output:

2. Using DOM querySelector() Method

The querySelector() method in JavaScript selects the first radio button that matches a given selector. By checking the checked property of the selected element, it can be determined if the radio button is selected.

html

<html>
<head></head>
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        Click on the button to check whether<br>
        a radio button is selected or not
    </h3>

    <form>
        <input type="radio" 
               name="GFG" 
               id="GFG" 
               value="GeeksforGeeks">GeeksforGeeks<br>

        <input type="radio" 
               name="GFG" 
               id="HTML" 
               value="HTML">HTML<br>

        <input type="radio" 
               name="GFG" 
               id="JS" 
               value="JavaScript">JavaScript<br><br>

        <button type="button" onclick="display()">
            Submit
        </button>
    </form>
    <br>
    <div id="disp" 
         style="color:green; font-size:18px; font-weight:bold;">
    </div>
    <script>
        function display() {
            let checkRadio = document.querySelector(
                'input[name="GFG"]:checked');

            if (checkRadio != null) {
                document.getElementById("disp").innerHTML
                    = checkRadio.value
                    + " radio button checked";
            }
            else {
                document.getElementById("disp").innerHTML
                    = "No one selected";
            }
        }
    </script>
</body>

</html>

Output:

3. Using for Loop to Check All Radio Buttons in a Group

If there are multiple radio buttons in a group and it is needed to check if any of them is selected, a for loop can be used to go through all the radio buttons with the same name.

HTML

<html>
<head></head>
<body>

    <h1 style="color:darkred;">
        GeeksforGeeks
    </h1>

    <h3>
        Click the button to check which radio button is selected using a for loop.
    </h3>
    <form>
        <input type="radio" name="fruit" value="Apple" id="apple"> Apple<br>
        <input type="radio" name="fruit" value="Banana" id="banana"> Banana<br>
        <input type="radio" name="fruit" value="Cherry" id="cherry"> Cherry<br><br>

        <button type="button" onclick="checkRadio()">Check Selection</button>
    </form>
    <br>

    <div id="message" style="color:green; font-size:18px; font-weight:bold;">
    </div>

    <script>
        function checkRadio() {
            var radios = document.getElementsByName('fruit');

            for (var i = 0; i < radios.length; i++) {
                if (radios[i].checked) {
                    document.getElementById("message").innerHTML =
                        radios[i].value + " radio button is selected.";
                    return; 
                }
            }
            document.getElementById("message").innerHTML = "No fruit is selected.";
        }
    </script>
</body>
</html>

Output

check-selection-with-for-loop — Check Whether a Radio Button is Selected With JavaScript

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.

Conclusion

Checking whether a radio button is selected can be done using various methods such as the checked property, querySelector() method, and a for loop. These approaches allow easy access and checking of radio button selections, making it simple to handle user input in forms.

How to get value of selected radio button using JavaScript ?

rupanisweety

Improve

Article Tags :

Check Whether a Radio Button is Selected With JavaScript

1. Using Input Radio checked property

2. Using DOM querySelector() Method

3. Using for Loop to Check All Radio Buttons in a Group

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?