单选按钮矩阵组javascript jquery

Question

我完全不知道如何解决这个问题。 我需要创建一个单选按钮矩阵，第 1 到第 3 列和 A 到 C 行。
A B C
1 (o) (o) (o)
2 (o) (o) (o)
3 (o) (o) (o)

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

我应该每行和每列只能选择一个按钮，所以如果我选择了 A1 然后点击 B1，第一个应该取消选中。最大的问题实际上是 C 列。在这个专栏中，我应该能够选择所有三个，C1 C2 和 C3，但是如果我选择了 C2 然后选中 A2，那么第一个应该取消选中。 我已经扫描互联网好几天了，我找不到任何东西，所以如果有人知道一个教程或只是一些关于如何解决这个问题的信息，我将不胜感激。

或者也许不可能这样做？

谢谢

琳达

Answer 1

我在玩它时偶然发现了答案O_o

Demo

基本上你使用类名和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;
    });
});

编辑

---

Demo 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]
 });