javascript - 如何获取表格标题中选中的单选按钮的位置

Question

我想在不为这些单选按钮使用唯一 ID 或值的情况下获取选中的表标题的位置。我该怎么做？

$("#save").on('click', (function() {
  alert();
}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="save">Save</button>
<table border=1>
  <tr>
    <th>
      <input type="radio" name="header" />
      <br /> A
    </th>
    <th>
      <input type="radio" name="header" />
      <br /> B
    </th>
    <th>
      <input type="radio" name="header" />
      <br /> C
    </th>
  </tr>
  <tr>
    <td>row 1 </td>
    <td>row 1 </td>
    <td>row 1 </td>
  </tr>
</table>

Answer 1

假设“位置”是指包含选中的 radio 输入的第 th 元素的索引，您可以使用 :has(input:checked) 找到它，然后得到它的 index()，像这样:

$("#save").on('click', (function() {
  var index = $('th:has(input:checked)').index();
  console.log(index);
}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="save">Save</button>
<table border=1>
  <tr>
    <th>
      <input type="radio" name="header" />
      <br /> A
    </th>
    <th>
      <input type="radio" name="header" />
      <br /> B
    </th>
    <th>
      <input type="radio" name="header" />
      <br /> C
    </th>
  </tr>
  <tr>
    <td>row 1 </td>
    <td>row 1 </td>
    <td>row 1 </td>
  </tr>
</table>