Checking Value of Radio Button Group via JavaScript

Question

This may seem silly and downright stupid but I can t seem to figure out how to check the value of a radio button group in my HTML form via JavaScript  I have the following code    lt input type  radio  id  genderm  name  gender  value  male    gt   lt label for  genderm  gt Male lt  label gt   lt input type  radio  id  genderf  name  gender  value  female    gt   lt label for  genderf  gt Female lt  label gt    How do I retrieve the value of gender via JavaScript

User · Answer

Use document querySelector   if you want to avoid frameworks  which I almost always want to do    document querySelector  input name  gender   checked   value

User · Answer

x000D   x000D  function myFunction     x000D  document getElementById  text   value  male  x000D   document getElementById  myCheck 2   checked   false  x000D    var checkBox   document getElementById  myCheck    x000D    var text   document getElementById  text    x000D    if  checkBox checked    true   x000D      text style display    block   x000D      else   x000D       text style display    none   x000D      x000D    x000D  function myFunction 2     x000D  document getElementById  text   value  female  x000D   document getElementById  myCheck   checked   false  x000D    var checkBox   document getElementById  myCheck 2    x000D    var text   document getElementById  text    x000D    if  checkBox checked    true   x000D      text style display    block   x000D      else   x000D       text style display    none   x000D      x000D    x000D  Male   lt input type  checkbox  id  myCheck   onclick  myFunction    gt  x000D  Female   lt input type  checkbox  id  myCheck 2   onclick  myFunction 2    gt  x000D   x000D   lt input type  text  id  text  placeholder  Name  gt  x000D   x000D   x000D

User · Answer

Without loop   document getElementsByName  gender   reduce function value  checkable        if checkable checked    true           value   checkable value       return value            reduce is just a function that will feed sequentially array elements to second argument of callback  and previously returned function to value  while for the first run  it will use value of second argument   The only minus of this approach is that reduce will traverse every element returned by getElementsByName even after it have found selected radio button

User · Answer

If you wrap your form elements in a form tag with a name attribute you can easily get the value using document formName radioGroupName value    lt form name  myForm  gt       lt input type  radio  id  genderm  name  gender  value  male    gt       lt label for  genderm  gt Male lt  label gt       lt input type  radio  id  genderf  name  gender  value  female    gt       lt label for  genderf  gt Female lt  label gt   lt  form gt    lt script gt      var selected   document forms myForm gender value   lt  script gt

User · Answer

In pure Javascript   var genders   document getElementsByName  gender    var selectedGender   for var i   0  i  lt  genders length  i         if genders i  checked         selectedGender   genders i  value       update  In pure Javascript without loop  using newer  and potentially not-yet-supported  RadioNodeList    var form elements   document getElementById  my form   elements  var selectedGender   form elements  gender   value    The only catch is that RadioNodeList is only returned by the HTMLFormElement elements or HTMLFieldSetElement elements property  so you have to have some identifier for the form or fieldset that the radio inputs are wrapped in to grab it first

User · Answer

If you are using a javascript library like jQuery  it s very easy   alert    input name gender  checked   val       This code will select the checked input with gender name  and gets it s value  Simple isn t it   Live demo

User · Answer

Try     var selectedVal   for  i   0  i  lt  document form name gender length  i         if document form name gender i  checked      selectedVal   document form name gender i  value    male or female     break

User · Answer

To get the value you would do this   document getElementById  genderf   value    But to check  whether the radio button is checked or selected   document getElementById  genderf   checked

[javascript] Checking Value of Radio Button Group via JavaScript?

Examples related to javascript

Examples related to html

Examples related to forms

Examples related to radio-button