How To Get Selected Radio Button Text in JavaScript?

Jun 16, 2021 . Admin

Hello Friends,

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

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

Example :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript Get Selected Radio Button Text 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">
                            <form action="" name="form1">
                                <label for="radio1">Dell</label>
                                <input type="radio" name="rad_test" value="400" id="radio1"/>
                                <br>

                                <label for="radio402">Hp</label>
                                <input type="radio" name="rad_test" value="401" id="radio402"/>
                                <br>

                                <label for="radio403">Lenovo</label>
                                <input type="radio" name="rad_test" value="402" id="radio403" checked />
                                <br>

                                <input type="button" class="btn btn-primary" value="Submit" name="btn_submit" onclick="update_order_onclick()"/>
                            </form>
                            <div id="company" class="mt-2"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        function update_order_onclick() {
            var value= 'Nothing selected here..',
            selected= document.querySelector('input[name="rad_test"]:checked'),
            company= document.querySelector('#company');
            if(selected) {
                value= document.querySelector('label[for="'+selected.id+'"]').innerHTML;
            }
            company.innerHTML= value;
        }
    </script>
</html>

Output :