Радиоустройства снимите галочку

Question

РЕДАКТИРОВАТЬ * Ответ ниже устраняет проблему, если у кого-то есть те же проблемы.

Небольшая проблема с моими переключателями. У меня есть три линии, каждая с 3-мя радио-кнопками. Я хочу, чтобы пользователь мог проверить любую из переключателей на первых двух строках, но только иметь возможность выбрать один вариант на каждой строке :

Например

Пользователь может выбрать только один вариант из «keystage1yr1» и может выбрать только один вариант из «keystage1yr2». Все это прекрасно работает, поскольку у них есть одно и то же «имя», поэтому по умолчанию пользователь может выбрать только один для каждой строки.

Я попытался:

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?

Но знать удачи, хотя они могут помочь другим людям.

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

Заранее спасибо.

Answer 1

Вот некоторые Javascript, который должен помочь вам:

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

Пример этой работы: http://jsfiddle.net/CUTnY/