Home

How to Get Selected Radio Button Value in jQuery

Published on 7th Feb 2018 in JavaScript

In this tutorial we are going to see how to get selected or checked radio button value in jQuery. Here we will use :checked selector with val() to get selected radio button value from a group of radio buttons. It is very easy to get selected value using jquery. jQuery selectors are used to select HTML elements and perform actions on it. The following example will help you to understand how to get selected radio button value in jQuery.

To get the selected radio button value we use

var selValue = $("input[name='tutorial']:checked").val();

jQuery :checked selector is used to retrieve selected radio button value. We are going to get radio button value by on change event. 

 

How to Get Selected Radio Button Value in jQuery

Get the selected radio button value onchange

HTML Code:

<p>
<label><input type="radio" name="tutorial" value="PHP">PHP</label>  
<label><input type="radio" name="tutorial" value="MySQL">MySQL</label>  
<label><input type="radio" name="tutorial" value="jQuery">jQuery</label>
<label><input type="radio" name="tutorial" value="AJAX">AJAX</label>
<label><input type="radio" name="tutorial" value="JSON">JSON</label>
</p>

jQuery Code:

 $(document).ready(function () {
    $("input[name='tutorial']").on('change', function () {
    var selValue = $("input[name='tutorial']:checked").val();
     if(selValue)
     {
         alert("You have selected : "+ selValue);
     }
    });
  });

Complete Code:

<!DOCTYPE html>
<!--
Website  : phpcluster.com
Tutorial : How to Get Selected Radio Button Value in jQuery
Author   : Vikash Kumar Singh
-->
<html>
    <head>
        <title>How to Get Selected Radio Button Value in jQuery</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
        $(document).ready(function () {
            $("input[name='tutorial']").on('change', function () {
            var selValue = $("input[name='tutorial']:checked").val();
             if(selValue)
             {
                 alert("You have selected : "+ selValue);
             }
            });
        });
        </script>
    </head>
    <body>
        <div>
            <h1>Get Selected Radio Button Value in jQuery</h1>
            <h5> Select tutorial</h5>

            <p>
                <label><input type="radio" name="tutorial" value="PHP">PHP</label>  
                <label><input type="radio" name="tutorial" value="MySQL">MySQL</label>  
                <label><input type="radio" name="tutorial" value="jQuery">jQuery</label>
                <label><input type="radio" name="tutorial" value="AJAX">AJAX</label>
                <label><input type="radio" name="tutorial" value="JSON">JSON</label>
            </p>
        </div>
        
    </body>
</html>

 

 

Get the selected radio button value on button click

In this example we are going to get selected radio button value on click of a button.

HTML Code:

<p>
<label><input type="radio" name="db" value="MySQL">MySQL</label>  
<label><input type="radio" name="db" value="ORACLE">ORACLE</label>  
<label><input type="radio" name="db" value="SQLite">SQLite</label>
<label><input type="radio" name="db" value="MS Access">MS Access</label>
</p>
<p> <input type="button" value="Get Value"></p>

jQuery Code:

$(document).ready(function () {
    $("input[type='button']").on('click', function () {
        var selValue = $("input[name='db']:checked").val();
        if (selValue)
        {
            alert("You have selected : " + selValue);
        }
    });
});

Complete Code:

<!DOCTYPE html>
<!--
Website  : phpcluster.com
Tutorial : Get Selected Radio Button Value on Button Click in jQuery
Author   : Vikash Kumar Singh
-->
<html>
    <head>
        <title>Get Selected Radio Button Value on Button Click in jQuery</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
       
         <script>
            $(document).ready(function () {
                $("input[type='button']").on('click', function () {
                    var selValue = $("input[name='db']:checked").val();
                    if (selValue)
                    {
                        alert("You have selected : " + selValue);
                    }
                });
            });
        </script>
        
    </head>
    <body>
       
       <div>
            <h1>Get Selected Radio Button Value on Button Click in jQuery</h1>
            <h5> Select Database</h5>

            <p>
                <label><input type="radio" name="db" value="MySQL">MySQL</label>  
                <label><input type="radio" name="db" value="ORACLE">ORACLE</label>  
                <label><input type="radio" name="db" value="SQLite">SQLite</label>
                <label><input type="radio" name="db" value="MS Access">MS Access</label>
            </p>
            
            <p> <input type="button" value="Get Value"></p>
        </div>
    </body>
</html>

If you liked this article, please consider sharing it on social media. If you have any query regarding this article feel free to comment. I will gladly help you. PHPCluster.

Share It
Stay Connected
Like Us on Facebook