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>