Discussion :

[fraginfo]

Bonjour,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[danielhagnoul]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Bovino]

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

[fraginfo]

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

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[Bovino]

Il suffit de choisir les bonnes div...
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.

[fraginfo]

Il suffit de choisir les bonnes div...
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 ...

[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

[SylvainPV]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[royto]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
});