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.
Anonymous User
05-Apr-2019Thank you for the informative post.
Samuel Fernandes
31-Jul-2017It was really helpful to read this post.