使用原型/Javascript 基于单选按钮获取表格行

Question

我有一个 html 表，其中有一个名称和一个单选按钮，如下所示：

<table id="cars">
  <thead>
    <tr>
      <th>Car Name</th>
      <th></th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td class="car">Ford Focus</td>
      <td><input type="radio" id="selectedCar" name="selectedCar" value="8398"></td>
    </tr>

    <tr>
      <td class="car">Lincoln Navigator</td>
      <td><input type="radio" id="selectedCar" name="selectedCar" value="2994"></td>
    </tr>

  </tbody>
</table>
<input type="button" value="Select Car" onclick="selectCar()"></input>

我希望能够选择一个单选按钮，然后单击另一个按钮并获取单选按钮的值（这是一个唯一的 ID）以及汽车名称文本（如福特福克斯）。我应该如何编写 selectCar 方法？我尝试过一些事情，例如：

val1 = $('tr input[name=selectedCar]:checked').parent().find('#cars').html();
val1 = $("td input[name='selectedCar']:checked").parents().find('.cars').html();
val1 = $('selectedCar').checked;

但我无法获得正确的值。

我正在使用原型，但解决方案也可以是普通的 Javascript。

Answer 1

所有 ID 都必须是唯一的！

您可以尝试使用此 HTML：

<tr>
  <td class="car">Ford Focus</td>
  <td><input type="radio" id="selectedCar1" name="selectedCar" value="8398"></td>
</tr>

<tr>
  <td class="car">Lincoln Navigator</td>
  <td><input type="radio" id="selectedCar2" name="selectedCar" value="2994"></td>
</tr>

此后，您可以使用以下方法进行测试：（

val1 = $('selectedCar1').checked;

返回 true 或 false）。

或者，如果您想获取所选值，请使用 getElementsByName：

function getCarValue()
{
    var theCars = document.getElementsByName("selectedCar");
    var i = theCars.length;
    while (i--) {
        if(theCars[i].checked)
             return theCars[i].value;

    }
}