Как сделать 2-сторонний/2-й мундштук для радиоуправления (эксклюзивность)

Question

Я искал способ сделать сетку радиокнопки, где их «взаимно эксклюзивная» функция работает в двух направлениях. Идея состоит в том, чтобы разрешить только один выбор всех кнопок в определенной строке - но также и только одну из всех кнопок в определенном столбце.

Я действительно ответил на свой вопрос, но я думал, что отправлю его здесь, так как сам не нашел этот вопрос, и кажется, что это может быть вообще полезно.

Answer 1

Вот fiddle, демонстрирующий мое решение.

Основной смысл заключается в использовании обычной технологии переключателей в одном направлении, например. горизонтально, и использовать расположение селектора для соответствия всему столбцу в другом направлении - я использовал класс css.

Затем, щелкнув, снимите отметку со всей колонки перед проверкой this.

HTML:

<input class=one type=radio name=foo value=1/> 
<input class=two type=radio name=foo value=2/> 
<input class=three type=radio name=foo value=3/> 
<br/> 
<input class=one type=radio name=bar value=1/> 
<input class=two type=radio name=bar value=2/> 
<input class=three type=radio name=bar value=3/> 
<br/> 
<input class=one type=radio name=car value=1/> 
<input class=two type=radio name=car value=2/> 
<input class=three type=radio name=car value=3/> 
<br/> 

JQuery:

$('input').on 'click', -> 
    ele=$(this) 
    myClass=ele.attr('class') 
    $('input.'+myClass).attr('checked',false) 
    ele.attr('checked',true)