jQueryで上下左右で一つのラジオボタン

1
<table>
2
  <tr>
3
      <th></th>
4
      <th>1</th>
5
      <th>2</th>
6
      <th>3</th>
7
  </tr>
8
  <tr>
9
    <td>Twix</td>
10
    <td><input type="radio" name="row-1" data-col="1"></td>
11
    <td><input type="radio" name="row-1" data-col="2"></td>
12
    <td><input type="radio" name="row-1" data-col="3"></td>
13
  </tr>
14
  <tr>
15
    <td>Snickers</td>
16
    <td><input type="radio" name="row-2" data-col="1"></td>
17
    <td><input type="radio" name="row-2" data-col="2"></td>
18
    <td><input type="radio" name="row-2" data-col="3"></td>
19
  </tr>
20
  <tr>
21
      <td>Butterfingers</td>
22
      <td><input type="radio" name="row-3" data-col="1"></td>
23
      <td><input type="radio" name="row-3" data-col="2"></td>
24
      <td><input type="radio" name="row-3" data-col="3"></td>
25
  </tr>
26
</table>

1
$(function() {
2
  var col, el;
3
  $("input[type=radio]").click(function() {
4
     el = $(this);
5
     col = el.data("col");
6
     $("input[data-col=" + col + "]").prop("checked", false);
7
     el.prop("checked", true);
8
  });
9
});