Selecting radio buttons in a row or a column in table

Question

I have the following markup:

 <table> <tr> <td><input type="radio" name="radio"></td> <td><input type="radio" name="radio"></td> <td><input type="radio" name="radio"></td> </tr> <tr> <td><input type="radio" name="radio"></td> <td><input type="radio" name="radio"></td> <td><input type="radio" name="radio"></td> </tr> <tr> <td><input type="radio" name="radio"></td> <td><input type="radio" name="radio"></td> <td><input type="radio" name="radio"></td> </tr> </table> 

This is a 3x3 table with 9 radio buttons in it. I want to configure it so that I can either:

• Select only 1 radio button per row OR
• Select only 1 radio button per column

Is this possible without any JavaScript? Thanks!

Answer 1

You can make the inputs in the rows/columns (Depending on what you want) to have the same name so only one of them will be able to be checked.

One per row

 <table> <tr> <td><input type="radio" name="radio1"></td> <td><input type="radio" name="radio1"></td> <td><input type="radio" name="radio1"></td> </tr> <tr> <td><input type="radio" name="radio2"></td> <td><input type="radio" name="radio2"></td> <td><input type="radio" name="radio2"></td> </tr> <tr> <td><input type="radio" name="radio3"></td> <td><input type="radio" name="radio3"></td> <td><input type="radio" name="radio3"></td> </tr> </table> 

One per column

 <table> <tr> <td><input type="radio" name="radio1"></td> <td><input type="radio" name="radio2"></td> <td><input type="radio" name="radio3"></td> </tr> <tr> <td><input type="radio" name="radio1"></td> <td><input type="radio" name="radio2"></td> <td><input type="radio" name="radio3"></td> </tr> <tr> <td><input type="radio" name="radio1"></td> <td><input type="radio" name="radio2"></td> <td><input type="radio" name="radio3"></td> </tr> </table>