Adding radio button values together dynamically

Question

I'm trying to get a running total of values added together when a user selects a radio button. Currently it's just coming back as blank. Here's what I've got so far:

<script type="text/javascript">
function findTotal(){
var ntot = 0
var a = document.getElementsByName('ur').val();
var b = document.getElementsByName('haem').val();
var c = document.getElementsByName('haew').val();
var d = document.getElementsByName('syb').val();
var e = document.getElementsByName('orm').val();

var tot= ntot + a + b + c + d + e;

document.getElementById('total').value = tot;
}

</script>

And a cut down amount of radio buttons for example:

0 <input type="radio" name="ur" value="0" id="ur1" class="radi" onclick="findTotal()"/> <br />
2 <input type="radio" name="ur" value="2" id="ur2" class="radi" onclick="findTotal()"/> <br />

0 <input type="radio" name="haem" value="0" id="haem1" class="radi"  onclick="findTotal()"/><br />
1 <input type="radio" name="haem" value="1" id="haem2" class="radi" onclick="findTotal()"/> <br />

0 <input type="radio" name="haew" value="0" id="haew1" class="radi" onclick="findTotal()"/><br />
1 <input type="radio" name="haew" value="1" id="haew2" class="radi" onclick="findTotal()" /> <br />

0 <input type="radio" name="syb" value="0" id="syb1" class="radi" onclick="findTotal()"/><br />
1 <input type="radio" name="syb" value="1" id="syb2" class="radi" onclick="findTotal()"/> <br />

0 <input type="radio" name="orm" value="0" id="orm1" class="radi" onclick="findTotal()"/><br />
1 <input type="radio" name="orm" value="1" id="orm2" class="radi" onclick="findTotal()"/> <br />

Total: <input type="text" name="total" id="total"/>

Any help would be much appreciated.

Answer 1

getElementsByName() , as implied by the "s" in "elements", returns a list of elements. And that list doesn't have a .val() method or a .value property, nor does it select just the checked items.

But this is easy to do with jQuery. Remove all the inline onclick= handlers, then just bind the click handler with jQuery based on the common class.

You can quickly grab the checked radio buttons by using the :checked selector , then loop through them using the .each() method . I'm using the unary plus operator to convert the string values from the value attributes to numbers so that they can be added together.

 $(".radi").click(function() { var total = 0; $(".radi:checked").each(function() { total += +this.value; }); $("#total").val(total); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 0 <input type="radio" name="ur" value="0" id="ur1" class="radi"/> <br /> 2 <input type="radio" name="ur" value="2" id="ur2" class="radi"/> <br /> 0 <input type="radio" name="haem" value="0" id="haem1" class="radi"/><br /> 1 <input type="radio" name="haem" value="1" id="haem2" class="radi"/> <br /> 0 <input type="radio" name="haew" value="0" id="haew1" class="radi"/><br /> 1 <input type="radio" name="haew" value="1" id="haew2" class="radi" /> <br /> 0 <input type="radio" name="syb" value="0" id="syb1" class="radi"/><br /> 1 <input type="radio" name="syb" value="1" id="syb2" class="radi"/> <br /> 0 <input type="radio" name="orm" value="0" id="orm1" class="radi"/><br /> 1 <input type="radio" name="orm" value="1" id="orm2" class="radi" /> <br /> Total: <input type="text" name="total" id="total"/> 

Answer 2

You can get the checked radio buttons by using the :checked attribute. Then loop through them to add the values.

$(".radi").click(function() {
  var total = 0;
  $(".radi:checked").each(function() {
    total += parseInt($(this).val());
  })
  $("#total").val(total);
});

Fiddle

Note: instead of writing the inline functions, you can use the jquery event binding.

Answer 3

Possibly a lot less elegant that the other solutions that have just popped up, but this shows how to convert your original function to get the value of each radio button input group with the jQuery .val() method.

<script type="text/javascript">
function findTotal(){
var ntot = 0
var a = $("input:radio[name ='ur']:checked").val();
var b = $("input:radio[name ='haem']:checked").val();
var c = $("input:radio[name ='haew']:checked").val();
var d = $("input:radio[name ='syb']:checked").val();
var e = $("input:radio[name ='orm']:checked").val();

var tot= ntot + a + b + c + d + e;

document.getElementById('total').value = tot;
}

</script>