radio button matrix group javascript jquery

Question

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)

Answer 1

You may use my plugin https://github.com/zevero/jquery-checkbox-table

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

Answer 2

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

Demo

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.

Markup

---

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

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

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.