UPDATE

If you try the form on this link / 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 bee 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>

UPDATE

If you try the form on this link http://jsfiddle/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 bee 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>

• javascript
• jquery
• radio-button

Share Improve this question Follow edited Jan 23, 2012 at 14:15 Matt asked Jan 20, 2012 at 9:22 MattMatt 1,75788 gold badges3333 silver badges5858 bronze badges 6

• 2 "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? – Johan Commented Jan 20, 2012 at 9:24
• @Johan Iv'e not posted the Radio Buttons but the way I have it set up, it can't use the radiobuttons default behaviour. – Matt Commented Jan 20, 2012 at 10:05
• why not use checkboxes ? – Alex Commented Jan 20, 2012 at 13:10
• @alex It wouldnt work with what I need see this jsfiddle/Matt_KP/BwmzQ. – Matt Commented Jan 20, 2012 at 13:18
• @Matt seen fiddle, unless i'm missing something obvious i can't see why it wouldn't work. – Alex Commented Jan 23, 2012 at 8:08

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 5 +50

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

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