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>

Extenuation

"And this is what I am using to deselect certain radio buttons when others are selected" - Why are you trying to modify the behaviour when this is radiobuttons default? – Namangan

@Namangan Iv'e not posted the Radio Buttons but the way I have it set up, it can't use the radiobuttons default behaviour. – Extenuation

why not use checkboxes ? – Paste

@alex It wouldnt work with what I need see this jsfiddle.net/Matt_KP/BwmzQ. – Extenuation

@Extenuation seen fiddle, unless i'm missing something obvious i can't see why it wouldn't work. – Paste

@alex If you try the form on 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. – Extenuation

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!

Wittol

Works fine, but just one change you should be able to select one from Year 1 All Blocks & Units and one from Year 2 All Blocks & Units at the same time you can only not select one from these lines if you select one from Give me it all and save some monehhhh! – Extenuation

Ok, then you would want to just revert back to naming the form inputs differently.. as a matter of personal opinion, you should rethink how the form looks if you really want it to function like that - it is confusing. – Wittol

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;
    }
}

Picky

please see this jsfiddle.net/Matt_KP/BwmzQ. I cant use the stander way of deslecting radio buttons. The total box at the bottom is what is totaling wrong. – Extenuation

If you try the form on 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. – Extenuation

@Extenuation Yeah I looked at your code, then puked, then refused to look at it again. This problem wouldn't exist if you had sensible code. – Picky