How to get value of selected radio button

Question

I want to get the selected value from a group of radio buttons  Here s my HTML   lt div id  quot rates quot  gt     lt input type  quot radio quot  id  quot r1 quot  name  quot rate quot  value  quot Fixed Rate quot  gt  Fixed Rate    lt input type  quot radio quot  id  quot r2 quot  name  quot rate quot  value  quot Variable Rate quot  gt  Variable Rate    lt input type  quot radio quot  id  quot r3 quot  name  quot rate quot  value  quot Multi Rate quot  checked  quot checked quot  gt  Multi Rate    lt  div gt   Here s my js  var rates   document getElementById  rates   value  var rate value  if rates    Fixed Rate        rate value   document getElementById  r1   value        else if rates    Variable Rate        rate value   document getElementById  r2   value        else if rates    Multi Rate        rate value   document getElementById  r3   value       document getElementById  results   innerHTML   rate value   I keep getting undefined

User · Answer

directly calling a radio button many times gives you the value of the FIRST button, not the CHECKED button. instead of looping thru radio buttons to see which one is checked, i prefer to call an onclick javascript function that sets a variable that can later be retrieved at will.

<input type="radio" onclick="handleClick(this)" name="reportContent" id="reportContent" value="/reportFleet.php" >

which calls:

var currentValue = 0;
function handleClick(myRadio) {
    currentValue = myRadio.value;
    document.getElementById("buttonSubmit").disabled = false; 
}

additional advantage being that i can treat data and/or react to the checking of a button (in this case, enabling SUBMIT button).

User · Answer

My take on this problem with pure javascript is to find the checked node  find its value and pop it out from the array   var Anodes   document getElementsByName  A        AValue   Array from Anodes          filter node   gt  node checked          map node   gt  node value          pop    console log AValue     Note that I m using arrow functions  See this fiddle for a working example

User · Answer

I used the jQuery click function to get the desired output      input name rate    click function      console log  Hey you clicked this      this value      if this value     Fixed Rate        rate value       r1   value      else if this value    Variable Rate       rate value       r2   value      else if this value    Multi Rate       rate value       r3   value               results   innerHTML   rate value        Hope it helps

User · Answer

The one worked for me is given below from api jquery com   HTML   lt input type  radio  name  option  value  o1  gt option1 lt  input gt   lt input type  radio  name  option  value  o2  gt option2 lt  input gt    JavaScript  var selectedOption      input radio name option  checked   val     The variable selectedOption will contain the value of the selected radio button  i e  o1 or o2

User · Answer

If you are using jQuery      input name  rate   checked   val

User · Answer

Use  document querySelector  input type   radio  checked   value   to get value of selected checkbox   you can use other attributes to get value like  name   gender  etc  please go through   below snippet definitely it will helpful to you    Solution   x000D   x000D  document mainForm onclick   function    x000D      var gender   document querySelector  input name   gender  checked   value  x000D      result innerHTML    You Gender    gender  x000D    x000D   lt form id  mainForm  name  mainForm  gt  x000D       lt input type  radio  name  gender  value  Male  checked  gt Male x000D       lt input type  radio  name  gender  value  Female    gt Female x000D       lt input type  radio  name  gender  value  Others    gt Others x000D   lt  form gt  x000D   lt span id  result  gt  lt  span gt  x000D   x000D   x000D    Thank-You

User · Answer

x000D   x000D     var rates document getElementsByName  rate    x000D              for  i   0  i  lt  rates length  i      x000D              if  rates i  checked    x000D                console log rates i  value   x000D                rate rates i  value  x000D                document getElementById  rate   innerHTML   rate  x000D                alert rate   x000D                 x000D                x000D              x000D           lt div id  rates  gt  x000D             lt input type  radio  id  r1  name  rate  value  Fixed Rate  gt  Fixed Rate x000D             lt input type  radio  id  r2  name  rate  value  Variable Rate  gt  Variable Rate x000D             lt input type  radio  id  r3  name  rate  value  Multi Rate  checked  checked  gt  Multi Rate   x000D           lt  div gt  x000D           lt  br gt  x000D           lt div id  rate  gt  x000D           lt  div gt  x000D   x000D   x000D

User · Answer

You can also loop through the buttons with a forEach-loop on the elements      var elements   document getElementsByName  radioButton        var checkedButton      console log elements       elements forEach e   gt            if  e checked                  if radio button is checked  set sort style             checkedButton   e value

User · Answer

You can use  find   to select checked element   var radio   Array from document querySelectorAll   rate input     var value   radio length  amp  amp  radio find r   gt  r checked  value

User · Answer

In Javascript we can get the values by using Id s  getElementById    in the above code you posted has contain name not Id  so you to modify like this  if  document getElementById  r1   checked      rate value   document getElementById  r1   value      use this rate value according to your code

User · Answer

var rates   document getElementById  rates   value    The rates element is a div  so it won t have a value  This is probably where the undefined is coming from   The checked property will tell you whether the element is selected   if  document getElementById  r1   checked      rate value   document getElementById  r1   value

User · Answer

This works in IE9 and above and all other browsers   document querySelector  input name  rate   checked   value

User · Answer

If the buttons are in a form var myform   new FormData getformbywhatever   myform get  rate    QuerySelector above is a better solution  However  this method is easy to understand  especially if you don t have a clue about CSS  Plus  input fields are quite likely to be in a form anyway  Didn t check  there are other similar solutions  sorry for the repetition

User · Answer

var rates   document getElementById  rates   value    cannot get values of a radio button like that instead use  rate value   document getElementById  r1   value

User · Answer

An improvement to the previous suggested functions   function getRadioValue groupName        var  result      try           var o radio group   document getElementsByName groupName           for  var a   0  a  lt  o radio group length  a                  if  o radio group a  checked                     result   o radio group a  value                  break                                catch  e          return  result

User · Answer

You can get the value by using the checked property   var rates   document getElementsByName  rate    var rate value  for var i   0  i  lt  rates length  i         if rates i  checked           rate value   rates i  value

User · Answer

For you people living on the edge   There is now something called a RadioNodeList and accessing it s value property will return the value of the currently checked input  This will remove the necessity of first filtering out the  checked  input as we see in many of the posted answers    Example Form   lt form id  test  gt   lt label gt  lt input type  radio  name  test  value  A  gt  A lt  label gt   lt label gt  lt input type  radio  name  test  value  B  checked gt  B lt  label gt   lt label gt  lt input type  radio  name  test  value  C  gt  C lt  label gt   lt  form gt    To retrieve the checked value  you could do something like this   var form   document getElementById  test    alert form elements  test   value     The JSFiddle to prove it  http   jsfiddle net vjop5xtq   Please note this was implemented in Firefox 33  All other major browser seems to support it   Older browsers will require a polfyill for RadioNodeList for this to properly function

User · Answer

HTML CODE    lt input type  radio  name  rdoName  value  YES   gt    lt input type  radio  name  rdoName  value  NO   gt    JQUERY CODE   var value     input radio name rdoName  checked   val       x000D   x000D      btnSubmit   click function    x000D  var value    input radio name rdoName  checked   val    x000D  console log value   x000D  alert value   x000D     x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt input type  radio  name  rdoName  value  YES   gt  YES x000D   lt input type  radio  name  rdoName  value  NO   gt  NO x000D   lt br  gt  x000D   lt input type  button id  btnSubmit value  Which one Selected   gt  x000D   x000D   x000D    You will get  value  YES    if checked Radio Button with the value  YES  value  NO    if checked Radio Button with the value  NO

User · Answer

check value by ID   var CheckedValues        r1   is   checked      1   0

User · Answer

Assuming your form element is referred to by myForm variable below  and that your radio buttons share the name  my-radio-button-group-name   the following is pure JavaScript and standards compliant  although I have not checked it to be available everywhere    myForm elements namedItem  my-radio-button-group-name   value   The above will yield the value of a checked  or selected  as it is also called  radio button element  if any  or null otherwise  The crux of the solution is the namedItem function which works with radio buttons specifically   See HTMLFormElement elements  HTMLFormControlsCollection namedItem and especially RadioNodeList value  as namedItem usually returns a RadioNodeList object   I use MDN because it allows one to track standards compliance  at least to a large degree  and because it is easier to comprehend than many WhatWG and W3C publications

User · Answer

A year or so has passed since the question was asked  but I thought a substantial improvement of the answers was possible  I find this the easiest and most versatile script  because it checks whether a button has been checked  and if so  what its value is     lt  DOCTYPE html gt   lt html gt   lt head gt       lt meta charset  utf-8  gt       lt title gt Check radio checked and its value lt  title gt   lt  head gt   lt body gt        lt form name  theFormName  gt           lt input type  radio  name  theRadioGroupName  value  10  gt           lt input type  radio  name  theRadioGroupName  value  20  gt           lt input type  radio  name  theRadioGroupName  value  30  gt           lt input type  radio  name  theRadioGroupName  value  40  gt           lt input type  button  value  Check  onclick  getRadioValue  theRadioGroupName    gt       lt  form gt        lt script gt          function getRadioValue groupName                var radios   theFormName elements groupName               window rdValue     declares the global variable  rdValue              for  var i 0  i lt radios length  i                      var someRadio   radios i                   if  someRadio checked                        rdValue   someRadio value                      break                                    else rdValue    noRadioChecked                             if  rdValue     10                     alert  10       or  console log  10                             else if  rdValue     noRadioChecked                     alert  no radio checked                                 lt  script gt   lt  body gt   lt  html gt    You can also call the function within another function  like this    function doSomething         getRadioValue  theRadioGroupName        if  rdValue     10                do something           else if  rdValue     noRadioChecked                do something else

User · Answer

https   codepen io anon pen YQxbZJ  The HTML   lt div id  rates  gt   lt input type  radio  id  x1  name  rate  value  Fixed Rate  gt  Fixed Rate  lt input type  radio  id  x2  name  rate  value  Variable Rate   checked  checked  gt  Variable Rate  lt input type  radio  id  x3  name  rate  value  Multi Rate   gt  Multi Rate  lt  div gt    lt button id  rdio  gt  Check Radio  lt  button gt   lt div id  check  gt    lt  div gt    The JS  var x  y  var x   document getElementById  check    function boom     if  document getElementById  x1   checked    y   document getElementById  x1   value   else if document getElementById  x2   checked    y   document getElementById  x2   value   else if  document getElementById  x3   checked    y   document getElementById  x3   value  else   y    kuch nhi   x innerHTML   y     var z   document getElementById  rdio    z addEventListener  click   boom

User · Answer

In php it s very easy html page   x000D   x000D  Male lt input type  radio  name  radio  value  male  gt  lt br  gt  x000D  Female lt input type  radio  name  radio  value  female  gt  lt br  gt  x000D  Others lt input type  radio  name  radio  value  other  gt  lt br  gt  x000D   lt input type  submit  value  submit  gt  x000D   x000D   x000D    Take value from form to php   radio   POST  radio    lt br  gt  use php if isset   POST  submit     lt br  gt    lt br  gt  echo  you selected   radio  thank u   lt br  gt

User · Answer

Shortest     rates children  find c  gt c checked  value   x000D   x000D  let v      rates children  find c  gt c checked  value  console log v   x000D   lt div id  rates  gt     lt input type  radio  id  r1  name  rate  value  Fixed Rate  gt  Fixed Rate    lt input type  radio  id  r2  name  rate  value  Variable Rate  gt  Variable Rate    lt input type  radio  id  r3  name  rate  value  Multi Rate  checked  checked  gt  Multi Rate    lt  div gt  x000D   x000D   x000D

User · Answer

Another  apparently older  option is to use the format   document nameOfTheForm nameOfTheInput value   e g  document mainForm rads value    x000D   x000D  document mainForm onclick   function    x000D      var radVal   document mainForm rads value  x000D      result innerHTML    You selected    radVal  x000D    x000D   lt form id  mainForm  name  mainForm  gt  x000D       lt input type  radio  name  rads  value  1    gt  x000D       lt input type  radio  name  rads  value  2    gt  x000D       lt input type  radio  name  rads  value  3    gt  x000D       lt input type  radio  name  rads  value  4    gt  x000D   lt  form gt  x000D   lt span id  result  gt  lt  span gt  x000D   x000D   x000D    You can refer to the element by its name within a form  Your original HTML does not contain a form element though   Fiddle here  works in Chrome and Firefox   https   jsfiddle net Josh Shields 23kg3tf4 1

User · Answer

If you are using the JQuery  please use the bellow snippet for group of radio buttons   var radioBtValue     input type radio  name radiobt  checked   val

User · Answer

lt form id  rates  gt     lt input type  radio  name  rate  value  Fixed Rate  gt  Fixed    lt input type  radio  name  rate  value  Variable Rate  gt  Variable    lt input type  radio  name  rate  value  Multi Rate  checked gt  Multi  lt  form gt    then     var rate value   rates rate value

User · Answer

Simply use  document querySelector  input rate  checked    value

[javascript] How to get value of selected radio button?

Examples related to javascript

Examples related to html

Examples related to radio-button