简体   繁体   English

在表格的行或列中选择单选按钮

[英]Selecting radio buttons in a row or a column in table

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. 这是一个3x3的表格,里面有9个单选按钮。 I want to configure it so that I can either: 我想对其进行配置,以便可以:

  • Select only 1 radio button per row OR 每行选择1个单选按钮,或者
  • Select only 1 radio button per column 每列选择1个单选按钮

Is this possible without any JavaScript? 没有任何JavaScript,这可能吗? Thanks! 谢谢!

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> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM