Javascript: How to get the value from a checked radio button when more than one radio button is present

Question

I am trying to get the value from a checked radio button and eventually pass that value into other functions. Currently I am only successful when I have one radio button in my html. As soon as I add another radio button with the same name my Javascript function does not work as I intended.

Here is my Javascript:

function RadioButtonValue (form) {
if (form.elements ["radio"].checked) {
return parseInt (form.elements["radio"].value)
}else{
return 0}
}

function totalRadio (form) {
var radio = RadioButtonValue (form)
form.elements ["total"].value =  radio
}

Here is my HTML:

        <form>
            <input type="radio" name="radio" value="1" />1
            <br />
            <input type="radio" name="radio" value="2"/>2
            <br />
            <input type="button" value="Radio Button Value" onclick="javascript:totalRadio(this.form)" />
            <br />
            <input type="number" name="total" />
    </form>

I am looking for the simplest Javascript solution, I think using a "for loop" is the solution I need but I am not sure.

Thanks for the help in advance!

Answer 1

You are using the radio attribute to select the element. Therefore your code faces the ambiguity when there are more than one radio button elements on the page. Instead use name or class attributes to select the radio button group. That will fix the problem.

Answer 2

The following code will work for you.

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

HTML:

 <form>
            <input type="radio" name="radio" value="1" />1
            <br />
            <input type="radio" name="radio" value="2"/>2
            <br />
            <input type="button" value="Radio Button Value" onclick="javascript:totalRadio(this.form)" />
            <br />
            <input type="number" name="total" />
    </form>

Answer 3

Here's a loop that will just iterate through the radio buttons in the form that's being processed so it doesn't add any other checked radio buttons.

function RadioButtonValue (form) {    
   var returnVal = 0;
   var radios = form.elements ["radio"];
   for(var r = 0; r < radios.length; r++) {
        if (radios[r].checked) { 
            returnVal = parseInt (radios[r].value);
        }
   }
  return returnVal;
}

function totalRadio (form) {
    var radio = RadioButtonValue (form)
    form.elements ["total"].value =  radio
}

Here it is in a fiddle: http://jsfiddle.net/PM8Jm/1/

Answer 4

Here is a Sort and Simple Example using JQuery

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<form>
        <input type="radio" name="radio" value="1" />1
        <br />
        <input type="radio" name="radio" value="2"/>2
        <br />
        <input type="button" id="btn" value="Radio Button Value">        
        <input type="number" id="total" name="total" />
</form>

JavaScript

$(document).ready(function () {
   $('#btn').click(function () {
      $('#total').val($('input[name=radio]:radio:checked').val());    
  });
});

Here is JSFiddle : Radio Button Demo