11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour a tous
je souhaiterais pouvoir afficher ou masquer une div suivant la sélection d'un bouton radio
j'ai 4 boutons radio
dont 3 qui doivent afficher le même div
et 1 une autre div
la meilleure façon que j'ai trouvé c'est celle ci
Mais existe t-il un moyen pour éviter d'avoir 3 div avec le même contenu


  2 Cars
<input type="radio" name="choix_livraison" class="choix_livraison" data-nom="POSTE-ENVELLOPPE-belgique"  value ="1" checked="checked""> 

        3 Cars<input type="radio" name="choix_livraison" class="choix_livraison" data-nom="mondial relay-belgiqueE" value="2" > 
    
         3 Cars<input type="radio" name="choix_livraison" class="choix_livraison" data-nom="mondial relay-FRANCE" value="3" > 

 3 Cars<input type="radio" name="choix_livraison" class="choix_livraison" data-nom="mondial relay-autre" value="4" > 

    <div id="1" class="desc">
       j'ai sélectionne 2
    </div>
    <div id="2" class="desc">
        j'ai sélectionne 3
    </div>
  <div id="3" class="desc">
        j'ai sélectionne 3
    </div>
    <div id="4" class="desc">
        j'ai sélectionne 3
    </div>


$(document).ready(function() {
    $("div.desc").hide();
    $("input[name$='choix_livraison']").click(function() {
        var test = $(this).val();
        $("div.desc").hide();
        $("#" + test).show();
    });
});
Modérateur
Salut !

Si les 3 choix font apparaitre le même contenu, pourquoi ne pas faire une seul radio bouton avec les 3 choix ?

Sinon tu peux passer par un paramètre du genre data-* (comme ton data-nom) pour gérer la destination de l'affichage plutôt que la value :
2 Cars <input type="radio" name="choix_livraison" data-target="1" value="1"><br>
3 Cars <input type="radio" name="choix_livraison" data-target="2" value="2" > <br>
3 Cars <input type="radio" name="choix_livraison" data-target="2" value="3" > <br>
3 Cars <input type="radio" name="choix_livraison" data-target="2" value="4" > <br>
<br>

<div id="1" class="desc">
  j'ai sélectionne 2
</div>
<div id="2" class="desc">
  j'ai sélectionne 3
</div>

$(document).ready(function() {
    $("div.desc").hide();
    $("input[name$='choix_livraison']").click(function() {
        var test = $(this).data("target");;
        $("div.desc").hide();
        $("#" + test).show();
    });
});


https://jsfiddle.net/undless/01Lruzk9/

Bonne journée

PS : attention à la double quote à la fin de ton premier input