How To Get Selected Radio Button Value in JavaScript?

Jun 15, 2021 . Admin

Hello Friends,

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

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

Example : 1
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript Get Selected Radio Button Value 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 Value</h4>
                        </div>
                        <div class="card-body">
                            <form id="mainForm" name="mainForm">
                                <input type="radio" name="gender" value="Male" /> Male <br>
                                <input type="radio" name="gender" value="Female" checked /> Female <br>
                                <input type="radio" name="gender" value="Others" /> Others <br>
                            </form>
                            <span id="result"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        document.mainForm.onclick = function(){
            var gender = document.querySelector('input[name = gender]:checked').value;
            result.innerHTML = 'You Gender: '+gender;
        }
    </script>
</html>
Output :
Your Gender is: Male
Example : 2
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript Get Selected Radio Button Value 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 Value</h4>
                        </div>
                        <div class="card-body">
                            <p>Using radio buttons together with a text input field to display value of selected radio button:</p>
                            <p>Select your favorite stream:</p>
                            <form action="/action_page.php">
                                <input type="radio" name="stream" onclick="test(this.value)" value="BCA"> BCA<br>
                                <input type="radio" name="stream" onclick="test(this.value)" value="BBA"> BBA<br>
                                <input type="radio" name="stream" onclick="test(this.value)" value="B.COM"> B.COM<br>
                                <input type="radio" name="stream" onclick="test(this.value)" value="BSC"> BSC<br>
                                <input type="radio" name="stream" onclick="test(this.value)" value="BSC.IT"> BSC.IT<br><br>

                                Your favorite stream is: <input type="text" id="college" class="form-control">
                                <input type="submit" value="Submit form" class="btn btn-primary mt-2">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        function test(stream) {
            document.getElementById("college").value = stream;
        }
    </script>
</html>
Output :
Your favorite stream is: BCA

It will help you...

#Javascript