How to get the selected radio button value using js

Question

I am using this code to get the value of currently selected radio button  but it doesn t work   var mailcopy   document getElementById  mailCopy   value     How to get the currently selected radio button value using Javascript

User · Answer

Use the element checked property

User · Answer

HTML   lt p gt Gender lt  p gt   lt input type  radio  id  gender0  name  gender  value  Male  gt Male lt br gt   lt input type  radio  id  gender1  name  gender  value  Female  gt Female lt br gt    JS  var gender   document querySelector  input name    gender   checked   value  document writeln  You entered     gender     for your gender lt br gt

User · Answer

Since you want to get it using plain javascript  you can use the following code  var val       if document getElementById  radio1   checked      val   document getElementById  radio1   value  else if document getElementById  radio2   checked      val   document getElementById  radio2   value

User · Answer

If you are using jQuery  following code will work for you      input name radioName  checked   val

User · Answer

Radio buttons come in groups which have the same name and different ids  one of them will have the checked property set to true  so loop over them until you find it   function getCheckedRadio radio group        for  var i   0  i  lt  radio group length  i              var button   radio group i           if  button checked                return button                      return undefined    var checkedButton   getCheckedRadio document forms frmId elements groupName   if  checkedButton        alert  The value is     checkedButton value

User · Answer

function getCheckedValue radioObj  name         for  j   0  j  lt  radioObj rows length    j            for  k   0  k  lt  radioObj cells length    k                var radioChoice   document getElementById name         k               if  radioChoice checked                    return radioChoice value                                    return

User · Answer

A simpler way of doing this is to use a global js variable that simply holds the id of the clicked radio button  Then you don t have to waste code spinning thru your radio lists looking for the selected value   I have done this in cases where I have a dynamically generated list of 100 or more radio buttons  spinning thru them is  almost imperceptible  slow  but this is an easier solution   you can also do this with the id  but you usually just want the value    lt script gt  var gRadioValue         global declared outside of function function myRadioFunc        var radioVal   gRadioValue           or maybe  var whichRadio   document getElementById gWhichCheckedId         do somethign with radioVal    lt script gt    lt input type  radio  name  rdo  id  rdo1  value  1  onClick  gRadioValue  this value   gt  One  lt input type  radio  name  rdo  id  rdo2  value  2  onClick  gRadioValue  this value   gt  Two      lt input type  radio  name  rdo  id  rdo99  value  99  onClick  gRadioValue  this value   gt  99

User · Answer

Hy  you have to do it this way   function checkRadio          if document getElementById  user1   checked            return     user1   val         else if document getElementById  user2   checked            return     user2   val

User · Answer

You could do something very similar to Beanz s answer but instead of using IDs  use classes to reduce redundancy    x000D   x000D  function getSelectedValue     x000D    var radioBtns   document getElementsByClassName  radioBtn    x000D    for var i   0  i  lt  radioBtns length  i     x000D      if radioBtns i  checked   x000D        document getElementById  output   textContent   radioBtns i  value   x000D        x000D      x000D    x000D   lt input class  radioBtn  type  radio  name  order  value  button1    gt Button 1 lt br gt  x000D   lt input class  radioBtn  type  radio  name  order  value  button2    gt Button 2 lt br gt  x000D   lt input class  radioBtn  type  radio  name  order  value  button3    gt Button 3 lt br gt  x000D   lt button onclick  getSelectedValue     gt Get Value of Selected Radio lt  button gt  lt br gt  x000D   lt textarea id  output  gt  lt  textarea gt  x000D   x000D   x000D

User · Answer

all of you can test this example and easy to understand           Name     lt input type  text  id  text  class   input  gt                   lt input type  text  id  text1  class   input  gt          Gender   lt input type  radio  id  m  class  Rm   name  Rmale  value  Male  gt                   lt input type  radio  id  f  class  Rm  name  Rfemale  value  Female  gt          Course   lt input type  checkbox  id  math  class  cm  name  Cmath  value  Math  gt                   lt input type  checkbox  id  physic  class  cm  name  Cphysic  value  Physic  gt                   lt input type  checkbox  id  eng  class  cm   name  Ceng  value  English  gt           lt button type  button  id  b1  gt show lt  button gt       javascript       lt script gt          function getData input               return document getElementById input  value                    function dataByClassName st               var value document getElementsByClassName st              for var i 0 i  lt  value length i                     if value i  checked                       return value i  value                                                    document getElementById  b1   onclick   function                          var st                   name   getData  text   getData  text1                    gender   dataByClassName  Rm                    course   dataByClassName  cm                              alert st name     st gender     st course                    lt  script gt

User · Answer

If you can use jQuery  Chamika Sandamal  answer is the correct way to go  In the case you can t use jQuery you can do something like this   function selectedRadio         var radio   document getElementsByName  mailCopy        alert radio 0  value       Notes    In general for the inputs you want to have unique IDs  not a requirement but a good practice  All the radio inputs that are from the same group MUST have the same name attribute  for example You have to set the value attribute for each input   Here is an example of input radios    lt input type  radio  name  mailCopy  value  1    gt 1 lt br   gt   lt input type  radio  name  mailCopy  value  2    gt 2 lt br   gt

User · Answer

Try this  I hope this one will work  function loadRadioButton objectName  selectedValue         var radioButtons   document getElementsByName objectName        if  radioButtons    null            for  var radioCount   0  radioCount  lt  radioButtons length  radioCount                  if  radioButtons radioCount  value    selectedValue                    radioButtons radioCount  checked   true

User · Answer

var mailcopy   document getElementById  mailCopy   checked    if mailcopy  true      alert  Radio Button Checked      else     alert  Radio Button un-Checked

User · Answer

check this   lt input class  gender  type  radio  name  sex  value  male  gt Male  lt br gt   lt input class  gender  type  radio  name  sex  value  female  gt Female    lt script type  text javascript  gt    document  ready function          gender   change function           var val       gender checked   val        alert val             lt  script gt    Example

User · Answer

Maybe I m missing something here  but wouldn t the good old standard JS work  I mean   var selectedOption   document getElementById  your-form-name    radio-group-name   value        which is only valid of course if have provided  value  for your radio input elements    lt input type  radio  name  radio-group-name  value  red  checked gt   lt input type  radio  name  radio-group-name  value  blue  gt    The value should be either  red  or  blue  in the above example

User · Answer

Use   document querySelector   elementId checked   value    This will return the value of the selected radio button

User · Answer

Possibly not the most efficient way    but I have used an ID on each radio button  this is just because I m not passing it as an actual form  it is just the raw fields    I then call a function with a button  which checks each radio button to see if it is checked  It does this using the  checked function  If this is set to true I can change the value of another variable    x000D   x000D  function createOutput     x000D    var order    in   x000D    if  document getElementById  radio1   checked    true    x000D      order    pre   x000D      else if  document getElementById  radio2   checked    true    x000D      order    in   x000D      else if  document getElementById  radio3   checked    true    x000D      order    post   x000D      x000D    document getElementById  outputBox   innerHTML   order  x000D    x000D   lt input id  radio1  type  radio  name  order  value  preorder    gt Preorder x000D   lt input id  radio2  type  radio  name  order  value  inorder  checked  true    gt Inorder x000D   lt input id  radio3  type  radio  name  order  value  postorder    gt Postorder x000D   lt button onclick  createOutput     gt Generate Output lt  button gt  x000D   lt textarea id  outputBox  rows  10  cols  50  gt  lt  textarea gt  x000D   x000D   x000D    Hope this is useful  in someway   Beanz

User · Answer

you can use this     input name  field value   checked   val       or  for older version of jquery     input  name  field value   checked   val

[javascript] How to get the selected radio button value using js

Examples related to javascript

Examples related to radio-button