Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts
How to get the checked value of the radio button in javascript

How to get the checked value of the radio button in javascript

Hi, In This tutorial you will learn about "How to get the checked value of the radio button in javascript". If working on the javascript to get the values of the radio buttons it some times gets the not checked value or same value can be retrieved. Because when you write the radio buttons code any radio button is checked default
<input type="radio" id="lang" name="language" value="PHP" checked> PHP  
In javascript, we will retrieve this value as
var  language = document.getElementById('lang').value;
alert(language);
it will work perfectly when only one radio button. In another case, if you have the multiple radio buttons you need to check the every radio button is checked or not before getting the value from the radio button.

i.e, For Example, I showed the above example only one language but here I am taking the multiple languages.
 <input type="radio" id="lang1" name="language" value="PHP" checked> PHP  
 <input type="radio" id="lang2" name="language" value="Jquery"> Jquery  
 <input type="radio" id="lang3" name="language" value="MySql"> MySql  
 <input type="radio" id="lang4" name="language" value="Html"> Html  
 <input type="radio" id="lang5" name="language" value="CSS"> CSS  
 <input type="radio" id="lang6" name="language" value="JavaScript"> JavaScript  
In the above example name must be the same to all the radio buttons so that only one language can be selected. it is the default nature of the radio button. But you need to change the id of the name like the above code it is necessary to check the each and every radio button is checked or not before getting the checked value.
var language = "";  
 if (document.getElementById('lang1').checked) {  
  language = document.getElementById('lang1').value;  
 }else if (document.getElementById('lang2').checked) {  
  language = document.getElementById('lang2').value;  
 }else if (document.getElementById('lang3').checked) {  
  language = document.getElementById('lang3').value;  
 }else if (document.getElementById('lang4').checked) {  
  language = document.getElementById('lang4').value;  
 }else if (document.getElementById('lang5').checked) {  
  language = document.getElementById('lang5').value;  
 }else if (document.getElementById('lang6').checked) {  
  language = document.getElementById('lang6').value;  
 }  
 alert(language);  
* If you like this post please don't forget to subscribe TechiesBadi - programming blog for more useful stuff