Получить строку таблицы на основе переключателя, используя прототип / Javascript - PullRequest
2 голосов
/ 08 июня 2010

У меня есть 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>

Я хочу иметь возможность выбрать переключатель, затем нажать другую кнопку и получить значение переключателя.кнопка (которая является уникальным идентификатором), а также текст названия автомобиля (например, Ford Focus).Как я должен кодировать метод 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.

1 Ответ

3 голосов
/ 08 июня 2010

Все идентификаторы должны быть уникальными!

Вы можете попробовать с этим 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;

    }
}
...