Onclick sur <tr></tr> = coché un bouton radio

[ZelkiN]

Bonjour à tous, je sèche un peu sur du javascript basique, si vous pouviez me donner un coup de main

j'ai un tableau tout ce qu'il y a de plus simple avec des lignes <tr><td></td></tr> dans lesquelle se trouve un groupe de bouton radio, un bouton radio pour chaque ligne (10).

J'aimerai qu'a la place de cliquer directement sur le bouton radio, on clic sur la ligne <tr> de mon tableau et que ca check (selectionne) directement le bouton radio. Exemple en image

Quand je clic sur "tabac presse le ..." ca me selectionne automatiquement mon bouton radio

Des idées avec on <tr onclick="..."> ? Merci

 

[spout]

Sur tout le <tr>, je n'ai pas de code JS à te proposer, mais sur le texte "Tab4c le Longchamp" par exemple, c'est plus simple avec un <label for=""> prévu à cet effet.
Surtout qu'à la droite de ton <tr> je vois que c'est des images avec un lien? Si oui ça pourrait fausser l'action du visiteur je pense.

Edit: possible qu'il y ai moyen de mettre un <label for=""> pour chaque cellule de la ligne, je n'ai jamais testé.

 

[jcaron]

Solution brute: tu as un compteur de lignes ($i), chaque radio a un id genre radio_$i, et tu mets sur chaque tr un truc du genre onclick="document.getElementById('radio_$i').checked=true".

Solution un peu moins brute: le onclick sur chaque tr cherche parmi ses enfants un input qui va bien et le sélectionne.

Le <label> sur un TR entier ou sur tous les éléments du TR j'ai tendance à penser que ça ne va (malheureusement) pas fonctionner de façon très universelle, mais peut-être que si.

Jacques.

 

[spout]

J'ai testé avec des <label> et ça fonctionne sans JS ! (testé sur Firefox 3.6 et IE 8 )

<form action="#" method="post">
	<table>
		<tr>
			<td><input type="radio" name="test" id="test1" /></td>
			<td><label for="test1">Cellule 1</label></td>
			<td><label for="test1">Cellule 2</label></td>
			<td><label for="test1">Cellule 3</label></td>
		</tr>
		<tr>
			<td><input type="radio" name="test" id="test2" /></td>
			<td><label for="test2">Cellule 1</label></td>
			<td><label for="test2">Cellule 2</label></td>
			<td><label for="test2">Cellule 3</label></td>
		</tr>
		<tr>
			<td><input type="radio" name="test" id="test3" /></td>
			<td><label for="test3">Cellule 1</label></td>
			<td><label for="test3">Cellule 2</label></td>
			<td><label for="test3">Cellule 3</label></td>
		</tr>
	</table>
</form>

 

[ZelkiN]

Et bien chers amis j'ai le plaisir de vous annoncer que vos 2 méthodes fonctionnent , que ce soit avec le getElementByID() ou le <label for="">

Le seul petit truc c'est qu'avec le label for="" ca marche mais que sur le texte qui se trouve dans la cellule, alors qu'avec le JS c'est toute la ligne (meme vide) qui est cliquable !

Le choix devient cornélien pour savoir quel méthode dois-je adopter

Merci à vous

 

[SoukaSR4]

Bonjour,
Votre solution ne marche pas chez moi j'ai besoin de votre aide svp c'est urgent!

code :

....
<tbody>
<tr style="cursorointer" onclick="document.getElementById(delivery-radio).checked=true" ng-repeat="deliveryMode in data.deliveryModes|orderByrderByField:reverseSort">

<td id="name"><input type="radio" id="delivery-radio" name="radio-Button">
<img style="width:33px;height:30px" ng-src="{{deliveryMode.imageSource}}">
{{deliveryMode.name}} </td>

<td> {{deliveryMode.deadLine}} </td>

<td> {{deliveryMode.price}} </td>
</tr>
</tbody>
....

Merci d'avance

NB: c'est fait en angularJS + html