переключатель матричная группа javascript jquery

Question

Я полностью потерян, как я могу решить это. Мне нужно создать матрицу из радиокнопок, столбцы с 1 по 3 и строки от А до С.
A B C
1 (о) (о) (о)
2 (о) (о) (о)
3 (о) (о) (о)

<table>   
<tr> 
<td>1</td> 
<td><input type="radio" id="ljudkalla_1" name="ljudkalla_1" value="Radio A" onclick="checkMatrixRow(this)"></td> 
<td><input type="radio" id="ljudkalla_2" name="ljudkalla_2" value="Radio B" onclick="checkMatrixRow(this)"></td> 
<td><input type="radio" id="ljudkalla_3" name="ljudkalla_3" value="Ipod A" onclick="checkMatrixRow(this)"></td> 
</tr>
<tr> 
<td>2</td> 
<td><input type="radio" id="ljudkalla_1" name="ljudkalla_1" value="Radio A" onclick="checkMatrixRow(this)"></td> 
<td><input type="radio" id="ljudkalla_2" name="ljudkalla_2" value="Radio B" onclick="checkMatrixRow(this)"></td> 
<td><input type="radio" id="ljudkalla_3" name="ljudkalla_3" value="Ipod A" onclick="checkMatrixRow(this)"></td> 
</tr>
<tr> 
<td>3</td> 
<td><input type="radio" id="ljudkalla_1" name="ljudkalla_1" value="Radio A" onclick="checkMatrixRow(this)"></td> 
<td><input type="radio" id="ljudkalla_2" name="ljudkalla_2" value="Radio B" onclick="checkMatrixRow(this)"></td> 
<td><input type="radio" id="ljudkalla_3" name="ljudkalla_3" value="Ipod A" onclick="checkMatrixRow(this)"></td> 
</tr>
</table>

<script>
// radio buttons
var columns = new    Array('ljudkalla_1','ljudkalla_2','ljudkalla_3');

function getSelectedIndex(array) {
for (var i=0; i<array.length; i++) {
    if (array[i].checked) return i;
}
}

function checkMatrixRow(input) {

var n = getSelectedIndex(input.form[input.name]); // index of selected button in a radio group (= row number)   


for (var i=0; i<columns.length; i++) {
    if (columns[i] != input.name) {
        input.form[columns[i]][n].checked = false;
    }
}
}
</script>

Я должен иметь возможность выбирать только одну кнопку для каждой строки и столбца, поэтому, если я выбрал А1, а затем нажал на B1, первая должна быть снята. Большая проблема на самом деле столбец C. В этом столбце я должен иметь возможность выбрать все три, C1 C2 и C3, но то же самое здесь, если я выбрал C2, а затем проверил A2, первый должен снять галочку. Я сканировал Интернет в течение нескольких дней, и я ничего не могу найти, поэтому, если кто-то знает учебник или просто некоторую информацию о том, как решить эту проблему, я был бы глубоко признателен.

Или, возможно, это невозможно сделать таким образом?

Спасибо

Линда

Answer 1

Я как-то наткнулся на ответ, играя с ним O_o

Демо

В основном вы используете имя класса в сочетании с атрибутом name, чтобы получить мультиОсь радио кнопки.Затем переключатели сбрасываются на основании того же имени, а остальные сбрасываются на основании имени класса.Элегантный, но простой.

Разметка

---

<table>   
<tr> 
<td>1</td> 
<td><input type="radio" class="ljudkalla_1" name="ljudkalla_1" value="Radio A"></td> 
<td><input type="radio" class="ljudkalla_2" name="ljudkalla_1" value="Radio B"></td> 
<td><input type="radio" class="ljudkalla_3" name="ljudkalla_1" value="Ipod A"></td> 
</tr>
<tr> 
<td>2</td> 
<td><input type="radio" class="ljudkalla_1" name="ljudkalla_2" value="Radio A"></td> 
<td><input type="radio" class="ljudkalla_2" name="ljudkalla_2" value="Radio B"></td> 
<td><input type="radio" class="ljudkalla_3" name="ljudkalla_2" value="Ipod A"></td> 
</tr>
<tr> 
<td>3</td> 
<td><input type="radio" class="ljudkalla_1" name="ljudkalla_3" value="Radio A"></td> 
<td><input type="radio" class="ljudkalla_2" name="ljudkalla_3" value="Radio B"></td> 
<td><input type="radio" class="ljudkalla_3" name="ljudkalla_3" value="Ipod A"></td> 
</tr>
</table>

jQuery

---

$("input").click(function(){
    $("input."+this.className).not($(this)).each(function(){
        this.checked = false;
    });
});

Редактировать

---

Демо2

Я добавил еще одну интересную небольшую функцию к этому со следующим кодом

$("input").click(function(){
    $("input."+this.className).not($(this)).each(function(){
        this.checked = false;
    });
    $("input:not([name='"+this.name+"'])").each(function(){
        if ($("input[name='"+this.name+"']:checked").length < 1)
            if($("input."+this.className+":checked").length < 1)
                this.checked = true;
    });
});

Это позволяет ему автоматически изменять выбор переключателя, если другой выбор отменяет выбор ... возможноВы должны просто увидеть демо.: P Это немного сложно объяснить, я думаю.

Answer 2

Вы можете использовать мой плагин https://github.com/zevero/jquery-checkbox-table

$('#container').checkbox_table({
   cols: ['A','B','C'],
   rows: [1,2,3]
 });