1. ⭐⭐⭐ Grosse PROMO en cours sur ma plateforme SEO My Ranking Metrics
    Rejeter la notice

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

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par ZelkiN, 31 Mai 2010.

  1. ZelkiN
    ZelkiN WRInaute occasionnel
    Inscrit:
    27 Juillet 2007
    Messages:
    463
    J'aime reçus:
    0
    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

    [​IMG]

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

    Des idées avec on <tr onclick="..."> ? Merci
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 760
    J'aime reçus:
    234
    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é.
     
  3. jcaron
    jcaron WRInaute accro
    Inscrit:
    13 Février 2004
    Messages:
    2 594
    J'aime reçus:
    0
    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.
     
  4. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 760
    J'aime reçus:
    234
    J'ai testé avec des <label> et ça fonctionne sans JS ! (testé sur Firefox 3.6 et IE 8 )

    Code:
    <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>
    
     
  5. ZelkiN
    ZelkiN WRInaute occasionnel
    Inscrit:
    27 Juillet 2007
    Messages:
    463
    J'aime reçus:
    0
    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 ;)
     
  6. SoukaSR4
    SoukaSR4 Nouveau WRInaute
    Inscrit:
    5 Avril 2015
    Messages:
    1
    J'aime reçus:
    0
    Bonjour,
    Votre solution ne marche pas chez moi :( j'ai besoin de votre aide svp c'est urgent!

    code :

    ....
    <tbody>
    <tr style="cursor:pointer" onclick="document.getElementById(delivery-radio).checked=true" ng-repeat="deliveryMode in data.deliveryModes|orderBy:eek:rderByField: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
     
Chargement...
Similar Threads - Onclick <tr>< tr> Forum Date
onClick select fonctionne pas avec Chrome Développement d'un site Web ou d'une appli mobile 7 Mars 2018
Afficher valeur id onclick sur checkbox Développement d'un site Web ou d'une appli mobile 21 Février 2018
Attribut onclick pénalisant ? Référencement Google 12 Mai 2017
Est-ce que Google crawl les onclick? Crawl et indexation Google, sitemaps 23 Juillet 2015
afficher masquer on utilisant Onclick Développement d'un site Web ou d'une appli mobile 21 Janvier 2015
Actualiser un div par onclick? Développement d'un site Web ou d'une appli mobile 28 Juin 2012
Insérer un Enregistrer sous sur OnClick Développement d'un site Web ou d'une appli mobile 20 Novembre 2011
Comment empêcher l'indexation de texte après un <a onclick=... Débuter en référencement 4 Novembre 2011
Onclick en 2011 ? :) Débuter en référencement 19 Octobre 2010
2 actions javascript sur un onclick Développement d'un site Web ou d'une appli mobile 15 Juin 2009
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice