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.

  Modified On Sep-18-2014 01:23:59 PM

Leave Comment