How to check whether a radio button is selected with JavaScript ?

Last Updated : 17 Sep, 2024

To check whether a radio button is selected with JavaScript, you can use the checked property to determine if a radio button within a group is selected. This is commonly used in forms to validate user choices, ensuring the correct options are chosen before submission.

There are two methods to solve this problem which are discussed below:

Table of Content

Using Input Radio checked property
Using DOM querySelector() Method

Using Input Radio checked property

The checked property approach uses JavaScript to check if a radio button is selected. By accessing a radio button element with document.getElementById or querySelector, you can evaluate its checked property, which returns true if the button is selected, otherwise false.

Example: In this example, we check if a radio button is selected. When the “Submit” button is clicked, it displays the selected radio button’s value or a message if none are selected.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to check whether a radio button
        is selected with JavaScript ?
    </title>
</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() {
            if (document.getElementById('GFG').checked) {
                document.getElementById("disp").innerHTML
                    = document.getElementById("GFG").value
                    + " radio button checked";
            }
            else if (document.getElementById('HTML').checked) {
                document.getElementById("disp").innerHTML
                    = document.getElementById("HTML").value
                    + " radio button checked";
            }
            else if (document.getElementById('JS').checked) {
                document.getElementById("disp").innerHTML
                    = document.getElementById("JS").value
                    + " radio button checked";
            }
            else {
                document.getElementById("disp").innerHTML
                    = "No one selected";
            }
        }
    </script>
</body>


</html>

Output:

Using Input Radio checked property Example Output

Using DOM querySelector() Method

The querySelector() method in JavaScript selects the first radio button that matches a specified selector. By checking the checked property of the selected element, you can determine if it’s selected. This approach simplifies accessing elements without directly using IDs or classes.

Example: In this example we use the querySelector() method to check if a radio button is selected. When the “Submit” button is clicked, it displays the selected radio button’s value or a message if none are selected.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to check whether a radio button
        is selected with JavaScript ?
    </title>
</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:

Using DOM querySelector() Method Example Output

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.

How to insert an item at the beginning of an array in PHP ?

rupanisweety

Improve

Article Tags :

How to check whether a radio button is selected with JavaScript ?

Using Input Radio checked property

Using DOM querySelector() Method

Similar Reads

Thank You!

What kind of Experience do you want to share?