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

ZelkiN
WRInaute impliqué
WRInaute impliqué
 
Messages: 500
Inscription: 27 Juil 2007

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

Message le Lun Mai 31, 2010 19:03

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

Image

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

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


spout
WRInaute accro
WRInaute accro
 
Messages: 4381
Inscription: 14 Mai 2003

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

Message le Lun Mai 31, 2010 21:15

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
WRInaute accro
WRInaute accro
 
Messages: 2685
Inscription: 13 Fév 2004

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

Message le Mar Juin 01, 2010 1:01

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
WRInaute accro
WRInaute accro
 
Messages: 4381
Inscription: 14 Mai 2003

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

Message le Mar Juin 01, 2010 4:13

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

Code: Tout sélectionner
<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
WRInaute impliqué
WRInaute impliqué
 
Messages: 500
Inscription: 27 Juil 2007

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

Message le Mar Juin 01, 2010 6:43

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

Merci à vous ;)


Si vous avez aimé cette discussion, partagez-la sur vos réseaux sociaux préférés :

Lectures recommandées sur ce thème :



Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité