Get Checked Radiobutton Using JavaScript

 

In this blog I will explain how to create radio button in html and how to get checked radio button value by using java script.

First create simple radio button in HTML:

     <table cellspacing="10">

        <tr>

            <td valign="top">

                Select technology:

            </td>

            <td>

                <input type="radio" value="PHP" name="radiodbtn" />PHP

                <input type="radio" value="ASP.NET" name="radiodbtn" />ASP.NET

                <input type="radio" value="JSP" name="radiodbtn" />JSP

                <input type="radio" value="ASP.NET MVC" name="radiodbtn" />ASP.NET MVC

            </td>

        </tr>

        <tr>

            <td colspan="2" align="center">

                <input type="button" value="Enter"/>

            </td>

        </tr>

   </table>

 

After creating radio buttons, create a function in java script that check whether a radio button is checked or not and if a radio button is checked, alert box display radio button value and also call that function on the click of button:

        function getSelectedRadioButton() {

            var ctr = 0;

            var radioLength = radiodbtn.length;

            for (var i = 0; i < radioLength; i++) {

                if (radiodbtn[i].checked) {

                    alert(radiodbtn[i].value);

                    break;

                }

                ctr++;

            }

            if (ctr == radioLength)

                alert("None of the technologies have been selected:");

        }

 

<input type="button" value="Enter" onclick="getSelectedRadioButton()" />

 

By reading this blog you can easily learn how to get selected radio button value through java script. Thank you for reading this blog.

Leave Comment