Question

EDIT* Answer below fixed the problem if anyone has the same problems.

Small problem with my radio buttons i have three lines each with 3 Radio Buttons, i want the user to be able to check any of the radio buttons on the first two lines but only be able to select one option on each line:

For example

User can only select one option from “keystage1yr1” and can only select one option from “keystage1yr2”. This all works fine as they have the same “name” so by defualt the user can only select one for each line.

I have tried:

Deselect Radio Button if another one is selected

How do I deselect a whole group of radio buttons when a user clicks on some other button?

But to know luck although they may help other people.

<input class="radio" type="radio" name="keystage1yr1" value="Paper" /> <span>&#163;25</span>
<input class="radio" type="radio" name="keystage1yr1" value="CD" /> <span>&#163;25 excl VAT</span>
<input class="radio" type="radio" name="keystage1yr1" value="Paper & CD" /> <span>&#163;40 excl VAT</span>

<input class="radio" type="radio" name="keystage1yr2" value="Paper" /> <span>&#163;25</span>
<input class="radio" type="radio" name="keystage1yr2" value="CD" /> <span>&#163;25 excl VAT</span>
<input class="radio" type="radio" name="keystage1yr2" value="Paper & CD" /> <span>&#163;40 excl VAT</span>

<input class="radio" type="radio" name="keystage1save" value="Paper" /> <span>&#163;47.50</span>
<input class="radio" type="radio" name="keystage1save" value="CD" /> <span>&#163;47.50 excl VAT</span>
<input class="radio" type="radio" name="keystage1save" value="Paper & CD" /> <span>&#163;75 excl VAT</span>

Thanks in advance.

Answer 1

Here’s some Javascript that should help you out:

// Simply caching the dom queries for speed
$yearstages = $('input[name="keystage1yr2"],input[name="keystage1yr1"]');
$savestages = $('input[name="keystage1save"]');
// I only attach one handler to some parent element:
$('#radios').on('change', 'input', function() {
    if (this.name == "keystage1save") {
        $yearstages.filter('input:checked').prop('checked', false);
    } else {
        $savestages.filter('input:checked').prop('checked', false);
    }
});

An example of this working: http://jsfiddle.net/CUTnY/