Javascript Get Selected Radio Button By Name Example

Jun 17, 2021 . Admin

Hello Friends,

Now let's see example of how to get selected radio button by name example. We will use how to get selected radio button by name in javascript. Here you will learn how to use javascript get selected radio button by name. This is a short guide on get selected radio button by name. Let's get started with how to get selected radio button by name in javascript.

Here i will give you many example how you can get selected radio button by name javascript.

Example :
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Javascript Get Selected Radio Button By Name Example</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container mt-5">
            <div class="row">
                <div class="col-md-6 offset-md-3">
                    <div class="card">
                        <div class="card-header">
                            <h4>JavaScript Get Selected Radio Button Text</h4>
                        </div>
                        <div class="card-body">
                            <b> Choose your favroite Subject: </b> <br>
                            <input type="radio" name="Subject" id="Laravel" value="Laravel"> Laravel <br> 
                            <input type="radio" name="Subject" id="JavaScript" value="JavaScript"> JavaScript <br> 
                            <input type="radio" name="Subject" id="Jquery" value="Jquery"> Jquery <br>
                            <input type="radio" name="Subject" id="PHP" value="PHP"> PHP <br>
                                
                            <button type="button" class="btn btn-primary mt-2" onclick=" checkButton()"> Submit </button> 
                            <h3 id="disp" style= "color:green"> </h3>
                            <h4 id="error" style= "color:red"> </h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        function checkButton() {  
            var getSelectedValue = document.querySelector( 
                'input[name="Subject"]:checked'); 
              
            if(getSelectedValue != null) { 
                document.getElementById("disp").innerHTML 
                    = getSelectedValue.value 
                    + " Subject is selected"; 
            } 
            else { 
                document.getElementById("error").innerHTML 
                    = "*You have not selected any Subject"; 
            } 
        }  
    </script> 
</html>
Output :
Laravel Subject is selected

It will help you...

#Javascript