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.

nnnnnn · Accepted Answer · 2016-05-10 10:14:02Z

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"/>

Anoop Joshi P · Accepted Answer · 2016-05-10 10:03:51Z

1

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.

answered May 10, 2016 at 10:03

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

Comments

Ted · Accepted Answer · 2016-05-10 10:04:13Z

1

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>

answered May 10, 2016 at 10:04

Ted

2,5652 gold badges39 silver badges57 bronze badges

Collectives™ on Stack Overflow

Adding radio button values together dynamically

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related