how to get checked radio button value in javascript

Question

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;
}

http://stackoverflow.com/questions/3778206/how-to-i-get-the-value-of-a-radio-button-with-javascript — BhavikKama, Oct 10 '13 at 10:10

score 3 · Answer 1 · answered Apr 07 '16 at 17:35

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();

score 1 · Answer 2 · answered Oct 10 '13 at 10:17

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];

score 1 · Answer 3 · answered Feb 10 '17 at 00:58

1

$(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.com/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>

answered Feb 10 '17 at 00:58

Dipika Walanjkar

29
5

quit simple way and easy way implementation . – Yogesh Nikam Feb 10 '17 at 01:01
1

how we can implement same for checkboxes? – Yogesh Nikam Feb 10 '17 at 01:18

score 0 · Accepted Answer · answered Oct 10 '13 at 10:04

0

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

answered Oct 10 '13 at 10:04

VisioN

143,310
32
282
281

I want text of selected radio button but i get "RadioButton1" as a value which not my answer – Ashish siwalkar Oct 10 '13 at 10:31
– Ashish siwalkar Oct 10 '13 at 10:34
text of radio button is dynamically generated – Ashish siwalkar Oct 10 '13 at 10:35
@Ashishsiwalkar I am not expert in ASP but I can give you a hint. If you have rendered `` and apply JavaScript `document.getElementById("RadioButton1").value`, you'll get `"RadioButton1"` since the value of your rendered element is exactly `"RadioButton1"`. – VisioN Oct 10 '13 at 10:38
can i get the text of radio button – Ashish siwalkar Oct 10 '13 at 10:39
@Ashishsiwalkar Are you talking about the `` element that is following your radio button? – VisioN Oct 10 '13 at 10:41
@Ashishsiwalkar What is text if radio button? `` element doesn't have text. It has name and value. – VisioN Oct 10 '13 at 10:47
text is progarmatically generated. I used RadioButton1.Text ="sdfdsf"; – Ashish siwalkar Oct 10 '13 at 10:49
@Ashishsiwalkar As I said I am not expert in ASP. How this `Text` property is rendered in the HTML? – VisioN Oct 10 '13 at 10:51

score 0 · Answer 5 · answered Feb 10 '17 at 01:25

This is ans for @yogi comment( 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.com/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>

@yogi this ans for comment. Hope this will help you – Pramod Kharade Feb 10 '17 at 01:25 — Pramod Kharade, Feb 10 '17 at 01:25

how to get checked radio button value in javascript

5 Answers5