Adding total of checked Radio Buttons

Question

UPDATE

If you try the form on this link http://jsfiddle.net/Matt_KP/BwmzQ/ the fiddle and select the top right £40 radio button then see the order total at the bottom it says £40. Then if you select the £75 the order total changes to £75 but then if you go back and check the £40 again the order total is £75 + £40 when it should just be £40 for the radio button that is checked.

UPDATE END

I have a section with Radio buttons where only certain radio buttons can be checked if others are selected. So say if a user selected one Radio Button but then selected another the first Radio Button would become unselected as they cannot have both selected.

Also I am using a custom attribute in the radio buttons called data-price which holds the value of each radio button that needs to be added toghther.

The problem is when a user selects a Radio Button the total shows fine but then if the user selects another radio button that can't have the previous one selected it adds the total onto the previous one where it should only add the Radio Buttons that are checked. It is kind of like caching the totals I think.

This is what I am using to total the checked Radio Buttons:

<script type="text/javascript">
jQuery(document).ready(function($){
$('input:radio').change(function(){
var total = 0.0;
$('input:radio:checked').each(function(){
      total += parseFloat($(this).data('price'));
});
$('#total').val(total.toFixed(2));
});

})
</script>

Answer 1

I think the majority of your issues can be circumvented with some new HTML....

Your crazy jQuery code to limit the input is ridiculous.. you have name, value, and your data-price attributes... splitting each radio set up by item seems a little overkill to me..

Here is a limited example (as per our discussion in the chat).

http://jsfiddle.net/CZpnD/ <- here is the example you can work from..

the main things to look at are how I used the same radio name for each "block" of options, and how I loop through all options when a single option is changed to get the new total (not the most efficient but it works).

and for the love of pete use labels!

Answer 2

HTML is build to do this.

<form name="myform">
    <input type="radio" name="foo" value="10" /> foo 
    <input type="radio" name="foo" value="30" /> bar 
</form>

If you give radio buttons the same name then only one can be selected.

Further more when you get the radio element the .value property represents the value of the currently checked radio button

var myform = document.forms.myform;

var radio = myform.elements.foo;
var price = radio.value;

Note that radio is a RadioNodeList which is only returned by elements[name]

Example

However it turns out that browser support for RadioNodeList is appaling so you have to do it manually. Or use the RadioNodeList polyfill

for (var i = 0, len = radio.length; i < len; i++) {
    var el = radio[i];
    if (el.checked) {
        var price = el.value;
        break;
    }
}