I have some set of radio button. I am trying to get checked radio button value using java script. But I got the error of uncaught id. I do the following code in html 5. I am not getting the value.

  function timeout()
  {
      if (document.getElementById["RadioButton1"].checked) 
         {
           choice = document.getElementById["RadioButton1"].value;
           alert('choice');

         }

     if (document.getElementById["RadioButton2"].checked)
        {
          choice = document.getElementById["RadioButton2"].value;
          alert('choice');
        }
     if (document.getElementById["RadioButton3"].checked)
       {
         choice = document.getElementById["RadioButton3"].value;
         alert('choice');

      }
    if (document.getElementById["RadioButton4"].checked)
      {
          choice = document.getElementById["RadioButton4"].value;
          alert('choice');
      }
   var c = document.getElementById("label1").value;
}

I have some set of radio button. I am trying to get checked radio button value using java script. But I got the error of uncaught id. I do the following code in html 5. I am not getting the value.

  function timeout()
  {
      if (document.getElementById["RadioButton1"].checked) 
         {
           choice = document.getElementById["RadioButton1"].value;
           alert('choice');

         }

     if (document.getElementById["RadioButton2"].checked)
        {
          choice = document.getElementById["RadioButton2"].value;
          alert('choice');
        }
     if (document.getElementById["RadioButton3"].checked)
       {
         choice = document.getElementById["RadioButton3"].value;
         alert('choice');

      }
    if (document.getElementById["RadioButton4"].checked)
      {
          choice = document.getElementById["RadioButton4"].value;
          alert('choice');
      }
   var c = document.getElementById("label1").value;
}

• javascript

• stackoverflow./questions/3778206/… – BhavikKama Commented Oct 10, 2013 at 10:10
• in that i not getting ans. thats why ask again – Ashish siwalkar Commented Oct 10, 2013 at 10:21
• what you not getting?? cant you even see your mistakes der? – BhavikKama Commented Oct 10, 2013 at 10:26

5 Answers 5

If you use the same name(in same radio button group) for all radio buttons like this

<input type="radio" id="RadioButton1" name="radio_group" value="1"/>
<input type="radio" id="RadioButton2" name="radio_group" value="2"/>
<input type="radio" id="RadioButton3" name="radio_group" value="3"/>

you can get the selected(checked radio button value ) using jQuery,in one line.

var Val = $("input[name=radio_group]:checked").val();

A set of radio buttons should all have the same name. So get the set, find the checked one and read its value:

function getValue(name) {
  var rbs = document.getElementsByName(name);

  for (var i=0, iLen=rbs.length, i<iLen; i++) {

    if (rbs[i].checked) {
      return rbs[i].value;
    }
  }
}

If the controls are in a form (which the usually are) and you have a reference to the form, you can get the set using:

var rbs = formRef[name];

$(document).ready(function(){
		$('#btnsubmit').click(function(){
          var result = $('input[type="radio"]:checked');
          if (result.length > 0) {
			$('#result').html(result.val()+" is Checked");
		}else{
			$('#result').html(" No radio button is Checked");
		}
        });
	});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="radio" name="gender"  value="Male"> Male
<input type="radio" name="gender" value="Female"> Female
<input type="submit" id="btnsubmit" value="submit">
<div id="result"></div>

The major problem visible from your code is a syntax error.

document.getElementById is a method and not an object, so you should call it with parens:

// --------------------v--------------v
document.getElementById("RadioButton1").value

This is ans for @yogi ment( how we can implement same for checkboxes?)

$(document).ready(function(){
    		$('#btnsubmit').click(function(){
              var result = $('input[type="checkbox"]:checked');
              if (result.length > 0) {
              	var resultstring = result.length +"checkboxes checked <br>";
              	result.each(function(){
              		resultstring += $(this).val()+" <br>"; //append value to exsiting var
              	});
    			$('#result').html(resultstring);
    		}else{
    			$('#result').html(" No checkbox  is Checked");
    		}
            });
    	});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="checkbox" name="skill"  value="Java"> Java
    <input type="checkbox" name="skill" value="Jquery"> Jquery
    <input type="checkbox" name="skill" value="PHP"> PHP
    <input type="submit" id="btnsubmit" value="submit">
    <div id="result"></div>