Getting Radio Button Values using jQuery and Javascript

published by d.cochran on Fri, 01/17/2014 - 09:57

There are many different ways to get the values of checkboxes using javascript or jQuery. I have assembled a list of some of the most popular methods.

Getting Radio Value using Name Attribute and jQuery

This method uses jQuery to select the DOM object via the name and property selector.

<script type="text/javascript">
function alertRadioValue() {
  var radioValue = $('input[name="radioButton"]:checked').val();
  alert(radioValue);
}
</script>
<input type="radio" name="radioButton" value="Yes"> - Yes<br />
<input type="radio" name="radioButton" value="No"> - No<br />
<input type="button" value="Alert Radio Value" onClick="alertRadioValue();">

Aquire Radio Value using Class and jQuery

This method uses jQuery to select the DOM object via the class and property selector.

<script type="text/javascript">
function alertRadioValue2() {
  var radioValue = $('input.radioButton2:checked').val();
  alert(radioValue);
}
</script>
<input type="radio" name="radioButton2" class="radioButton2" value="Yes"> - Yes<br />
<input type="radio" name="radioButton2" class="radioButton2" value="No"> - No<br />
<input type="button" value="Alert Radio Value 2" onClick="alertRadioValue2();">

Getting Radio Value using ID and jQuery

This method selects the DOM object based on its ID using jQuery and then checks if the radio button is "checked".

<script type="text/javascript">
function alertRadioValue3() {
  //jQuery .prop requires 1.6
  //before 1.6 use .is("checked")
  var radioValue;
 
  if ($('#radioButton3Yes').prop('checked')) {
    var radioValue = $('#radioButton3Yes').val();
  }
 
  if ($('#radioButton3No').prop('checked')) {
    var radioValue = $('#radioButton3No').val();
  }
 
  alert(radioValue);
}
</script>
<input type="radio" id="radioButton3Yes" name="radioButton3" value="Yes"> - Yes<br />
<input type="radio" id="radioButton3No" name="radioButton3" value="No"> - No<br />
<input type="button" value="Alert Radio Value 3" onClick="alertRadioValue3();">

Use jQuery to get ALL the radio values on a page

This method uses jQuery to loop through all the radio buttons on a page, check if the radio button is "checked", and then alerts all their "names" and "values".

<script type="text/javascript">
function alertAllRadioValues() {
 
  var radioValues = '';
 
  $('input[type="radio"]:checked').each(function() {
    radioValues += $(this).attr('name')+' = '+$(this).val()+'\n';
  });
 
  alert(radioValues);
}
</script>
<input type="radio" name="radioButton4" value="Yes"> - Yes<br />
<input type="radio" name="radioButton4" value="No"> - No<br />
<input type="button" value="Alert All Radio Values" onClick="alertAllRadioValues();">

Radio Button values using PURELY Javascript

Sometimes you gotta go back to your roots and use only javascript to get the radio button values.

<script type="text/javascript">
function alertRadioValueJS() {
 
  var radios = document.getElementsByName('radioButton5');
  var radioValues = '';
 
  for (var i = 0, length = radios.length; i < length; i++) {
    if (radios[i].checked) {
      radioValues = radios[i].value;
 
      // only one radio can be logically checked, don't check the rest
      break;
    }
  }
 
  alert(radioValues);
}
</script>
<input type="radio" name="radioButton5" value="Yes"> - Yes<br />
<input type="radio" name="radioButton5" value="No"> - No<br />
<input type="button" value="Alert Radio Values using Javascript" onClick="alertRadioValueJS();">

Comments

Checking the value of a checked radio button

Permalink Submitted by Paul Cachia (not verified) on Sat, 09/06/2014 - 08:51

Thanks Dustin. After looking at some of your script here I see that my problem was that I hadn't ":checked" to see if the button had been clicked or not. Dumb on my part but reading yuor script reminded me and solved my problem. Cheers, Paul.

You are here