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

Type1 1
Type2 A C
Type3 X X

Type1 2
Type2 B D
Type3 Y Z

单选按钮矩阵组javascript jquery

2 个答案:

Demo

标记

的jQuery

修改

Demo 2