How to get selected Radio button value in jQuery


In this tutorial, we will get the value of select Radio Button using jQuery API. jQuery provides the :checked selector for getting the value of checked radio button. :checked selector added since version 1.0.

Get value on change

In this example, we are going to retrieve the selected radio button value onchange.

JS Snippet
 $(document).ready(function () {
    $("input[type='radio']").on('change', function () {
         var selectedValue = $("input[name='lang']:checked").val();
         if (selectedValue) {
               alert("Hello, your favorite programming language= " + selectedValue);
           }
     });
});

Check the full example

<!DOCTYPE html>
<html>
    <head>
        <title>How to get selected Radio button Value in jQuery</title>
        <script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("input[type='radio']").on('change', function () {
                    var selectedValue = $("input[name='lang']:checked").val();
                    if (selectedValue) {
                        alert("Hello, your favorite programming language= " + selectedValue);
                    }
                });
            });
        </script>
    </head>
    <body>

        <h1>How to get selected Radio button Value in jQuery</h1>

        <h4>Select your favorite programming language.</h4>

        <p> 
            <label><input type="radio" name="lang" value="java">Java</label> 
            <label><input type="radio" name="lang" value="spring">Spring</label>
            <label><input type="radio" name="lang" value="struts">Struts</label> 
            <label><input type="radio" name="lang" value="jquery">jQuery</label>
            <label><input type="radio" name="lang" value="javascript">JavaScript</label> 
            <label><input type="radio" name="lang" value="c">C</label>
        </p>
    </body>
</html>

Get value on button click

In this example, we are going to retrieve the selected radio button value on external button click.

JS Snippet
 $(document).ready(function () {
	 $("input[type='button']").click(function () {
         var selectedValue = $("input[name='bird']:checked").val();
         if (selectedValue) {
               alert("Hello, your favorite bird= " + selectedValue);
           }
     });
});

Check the full example

<!DOCTYPE html>
<html>
    <head>
        <title>How to get selected Radio button Value in jQuery</title>
        <script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("input[type='button']").click(function () {
                    var selectedValue = $("input[name='bird']:checked").val();
                    if (selectedValue) {
                        alert("Hello, your favorite bird= " + selectedValue);
                    }
                });
            });
        </script>
    </head>
    <body>

        <h1>How to get selected Radio button Value in jQuery</h1>

        <h4>Select your favorite bird.</h4>

        <p> 
            <label><input type="radio" name="bird" value="Sparrow">Sparrow</label> 
            <label><input type="radio" name="bird" value="Parrot">Parrot</label>
            <label><input type="radio" name="bird" value="Eagle">Eagle</label> 
        </p>
        <p><input type="button" value="Get Value"></p>
    </body>
</html>

Similar Posts

About the Author

Websparrow
I like sharing my experiments and ideas with everyone by writing articles on the latest technological trends.