单选按钮矩阵组javascript jquery [英] radio button matrix group javascript jquery

问题描述

我对如何解决这个问题完全迷失了. 我需要创建一个由单选按钮组成的矩阵，列1至3和行A至C.
A B C
1(o)(o)(o)
2(o)(o)(o)
3(o)(o)(o)

I am completely lost as to how I can solve this. I need to create a matrix of radio buttons, column 1 to 3 and rows A to 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，则第一个应该取消选中. 我已经扫描互联网好几天了，但找不到任何东西，因此，如果有人知道某个教程或只是一些有关如何解决此问题的信息，我将不胜感激.

I should only be able to choose one button per row and column, so if I have chosen A1 and then click on B1, the first one should uncheck. The big issue is really the C column. In this column I should be able to choose all three, C1 C2 and C3, but same thing here if I have chosen C2 and then check A2 the first one should uncheck. I have been scanning the internet for days and I cannot find anything, so if anyone knows of a tutorial or just some information on how to solve this I would be deeply grateful.

或者不可能以这种方式做到这一点?

Or perhaps it is not possible to do it this way?

谢谢

琳达

推荐答案

在使用O_o玩游戏时，我有些迷惑于答案了

I some how stumbled upon the answer while playing with it O_o

基本上，您将类名与name属性结合使用以获得多轴单选按钮.然后，基于相同的名称重设单选按钮，并根据类名称重设其他按钮.优雅却简单.

Basically you use the class name in conjunction with the name attribute to get a multi-axis radio button. Then the radio buttons are reset based on the same name and you reset the others based on class name. Elegant yet simple.

<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

我使用以下代码为此添加了另一个很酷的小功能

Edit

---

Demo 2

I added another cool little feature to this with the following code

$("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我猜有点难以解释.

This enables it to automatically change a radio button selection if another selection deselects it... maybe you should just see the demo. :P It's a little hard to explain I guess.

这篇关于单选按钮矩阵组javascript jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！