cocher un input radio en cliquant sur une div

Version imprimable

Bonjour,

j'aimerai pouvoir cocher un input type radio en cliquant sur la div qui le contient, j'ai ça en gros :
Code:

1 2 3 4 5 6 7 8 9 10 11 <div id="conteneur"> <div id="choix1"> <input type="radio" name="choix" value="valeur1"/> Choix 1 </div> <div id="choix2"> <input type="radio" name="choix" value="valeur2"/> Choix 2 </div> <div id="choix3"> <input type="radio" name="choix" value="valeur3"/> Choix 3 </div> </div>
Je voudrais que quand on clique sur la div "choix2" cela check le radio button "choix" en "valeur2"

Une idée ????

Merci !

:calim2:

Code:

1
2
3
$( "div[id^='choix']" ).on( "click", function(){
    $( this ).children( "input" ).prop( "checked", true);
});

04/05/2013, 09h57
Bovino

Autant utiliser une balise <label> qui est faite pour ça... :roll:

merci, ta réponse fonctionne pour mon exemple, mais dans la pratique mon cas est plus compliqué et ta réponse ne colle pas car j'ai une div qui contient plusieurs div qui peuvent être cliquées, voici le code exact de mon cas :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
  <div class="modesLivraison">
 
     <div class="modeLivraison" id="modeLivraison1">
      <div class="modeLivraisonRadio" id="modeLivraisonRadio1">
        <input type="radio" name="radioModeLivraison"/>
      </div>
      <div class="modeLivraisonImage" id="modeLivraisonImage1">
        <img src="140001349418731.png">
      </div>
      <div class="modeLivraisonDetail" id="modeLivraisonDetail1">
        <p class="modeLivraison-h1">UPS</p>
        <p class="modeLivraisonDetail-p">bla bla bla</p>
      </div>
      <div class="modeLivraisonPrix">
        5&euro;
      </div>
     </div>
<br>
    <div class="modeLivraison" id="modeLivraison2">
      <div class="modeLivraisonRadio" id="modeLivraisonRadio2">
        <input type="radio" name="radioModeLivraison"/>
      </div>
      <div class="modeLivraisonImage" id="modeLivraisonImage2">
        <img src="0707140001349418731.png">
      </div>
      <div class="modeLivraisonDetail" id="modeLivraisonDetail2">
        <p class="modeLivraison-h1">SO COLISSIMO</p>
        <p class="modeLivraisonDetail-p">bla blabla bla</p>
      </div>
      <div class="modeLivraisonPrix" id="modeLivraisonPrix2">
        5&euro;
      </div>
     </div>
  </div>

merci de votre aide en tout cas !

04/05/2013, 10h20
Bovino

Il suffit de choisir les bonnes div... :roll:
Celles ayant la classe modeLivraisonRadio conviennent parfaitement et en les changeant en balises <label avec un display: block;, tu n'as pas besoin de JavaScript.
04/05/2013, 10h29
fraginfo

Citation:

Envoyé par Bovino

Il suffit de choisir les bonnes div... :roll:
Celles ayant la classe modeLivraisonRadio conviennent parfaitement et en les changeant en balises <label avec un display: block;, tu n'as pas besoin de JavaScript.

je ne comprends pas trop ta réponse, je débute désolé ...

Chaque mode de livraison est affiché sur une ligne et je veux que quand le visiteur clique n importe où sur la ligne cela check le radio correspondant, et non uniquement sur les clicks de la div modeLivraisonRadio ...
05/05/2013, 15h57
Philcmoi

salut
Peus tu donner un code plus propre avec des saut à la ligne.
Car j'ai essailler de mettre ton code, c'est illisible
Merci

Je pense que c'est ça que tu veux :
Code:

1 2 3 4 5 6 7 8 9 $(document).ready(function(){ $( ".modeLivraison" ).on( "click", function(){ $( ".modeLivraison input:radio" ).prop( "checked", false); $( this ).find( "input:radio" ).prop( "checked", true); }); });
L'utilisation d'un label est effectivement plus standard, mais bon si le comportement attendu est un peu différent il faut passer par du JS, pas le choix.

Une petite amélioration avec l'utilisation de siblings qui permet de récupérer les éléments frères qui sera plus performant.

Code:

1
2
3
4
5
6
7
8
$( ".modeLivraison" ).on( "click", function(){
    $(this).find("input:radio")
        .prop("checked", true)
        //on récupère les éléments frères et on décoche 
        .siblings()
        .find("input:radio")
        .prop( "checked", false);
});