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

Answer 1

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

Answer 2

Use document.querySelector() if you want to avoid frameworks (which I almost always want to do).

document.querySelector('input[name="gender"]:checked').value

Answer 3

Try:

var selectedVal;

for( i = 0; i < document.form_name.gender.length; i++ )
{
  if(document.form_name.gender[i].checked)
    selectedVal = document.form_name.gender[i].value; //male or female
    break;
  }
}

Answer 4

function myFunction() {
document.getElementById("text").value='male'
 document.getElementById("myCheck_2").checked = false;
  var checkBox = document.getElementById("myCheck");
  var text = document.getElementById("text");
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
     text.style.display = "none";
  }
}
function myFunction_2() {
document.getElementById("text").value='female'
 document.getElementById("myCheck").checked = false;
  var checkBox = document.getElementById("myCheck_2");
  var text = document.getElementById("text");
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
     text.style.display = "none";
  }
}

Male: <input type="checkbox" id="myCheck"  onclick="myFunction()">
Female: <input type="checkbox" id="myCheck_2"  onclick="myFunction_2()">

<input type="text" id="text" placeholder="Name">

Answer 5

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;

Answer 6

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.

<form name="myForm">
    <input type="radio" id="genderm" name="gender" value="male" />
    <label for="genderm">Male</label>
    <input type="radio" id="genderf" name="gender" value="female" />
    <label for="genderf">Female</label>
</form>

<script>
    var selected = document.forms.myForm.gender.value;
</script>