Retourne une ligne de table basée sur le bouton radio en utilisant un prototype/Javascript

Question

J'ai une table html qui a un nom et un bouton radio comme ceci:

<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> 

Je veux être en mesure de sélectionner un bouton radio, puis cliquez sur un autre bouton et obtenir la valeur du bouton radio (qui est un ID unique) ainsi que le texte du nom de la voiture (comme Ford Focus). Comment dois-je coder la méthode selectCar? J'ai essayé quelques choses comme:

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

mais je ne peux pas obtenir les valeurs appropriées.

J'utilise un prototype, mais la solution peut aussi bien être Javascript.

Answer 1

All IDs have to be unique!

Vous pouvez essayer avec ce 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> 

Après cela, vous pouvez tester en utilisant:

val1 = $('selectedCar1').checked; 

(retourne true ou false).

Ou, si vous voulez saisir la valeur sélectionnée, utilisez getElementsByName:

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

    } 
}