Comment utiliser jQuery pour afficher/masquer les divs en fonction de la sélection du bouton radio?

J'ai quelques boutons radio et j'aimerais voir apparaître différents divs cachés selon le bouton radio sélectionné. Voici ce que le HTML ressemble à:Comment utiliser jQuery pour afficher/masquer les divs en fonction de la sélection du bouton radio?

<form name="form1" id="my_form" method="post" action=""> 
    <div><label><input type="radio" name="group1" value="opt1">opt1</label></div> 
    <div><label><input type="radio" name="group1" value="opt2">opt2</label></div> 
    <div><label><input type="radio" name="group1" value="opt3">opt3</label></div> 
    <input type="submit" value="Submit"> 
</form> 

.... 

<style type="text/css"> 
    .desc { display: none; } 
</style> 

.... 

<div id="opt1" class="desc">lorem ipsum dolor</div> 
<div id="opt2" class="desc">consectetur adipisicing</div> 
<div id="opt3" class="desc">sed do eiusmod tempor</div>

Et voici mon jQuery:

$(document).ready(function(){ 
    $("input[name$='group2']").click(function() { 
     var test = $(this).val(); 
     $("#"+test).show(); 
    }); 
});

La raison pour laquelle je fais de cette façon est parce que mes boutons radio et divs sont générées dynamiquement (la valeur de le bouton radio aura toujours un div correspondant). Le code ci-dessus fonctionne partiellement - les divs montreront quand le bon bouton est coché, mais j'ai besoin d'ajouter du code pour que les divs se cachent à nouveau une fois le bouton décoché. Merci!

Source

2010-05-05 M Thomas

Question de Nice .... –

Comme @ ste-yeu mentionné, s'il vous plaît corriger le sélecteur sur « groupe1 » dans votre jQuery :) –

Mise à jour 2015/06

Comme jQuery a évolué depuis la question a été publiée, le moment approche recommandée utilise $.on

$(document).ready(function() { 
    $("input[name=group2]").on("change", function() { 

     var test = $(this).val(); 
     $(".desc").hide(); 
     $("#"+test).show(); 
    }); 
});

ou à l'extérieur $.ready()

$(document).on("change", "input[name=group2]", function() { ... });

originale answer

Vous devez utiliser gestionnaire d'événements .change():

$(document).ready(function(){ 
    $("input[name=group2]").change(function() { 
     var test = $(this).val(); 
     $(".desc").hide(); 
     $("#"+test).show(); 
    }); 
});

devrait fonctionner

Source

2010-05-05 22:13:45 Zlatev

Il suffit de les cacher avant de leur montrer:

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

Source

2010-05-05 22:14:20 albertein

merci, c'est exactement ce que je devais –

Thanx Man celui-ci m'a aidé .... –

La source simple jquery pour la même -

$("input:radio[name='group1']").click(function() {  
    $('.desc').hide(); 
    $('#' + $("input:radio[name='group1']:checked").val()).show(); 
});

Pour le rendre un peu plus approprié ajouter simplement vérifié première option -

<div><label><input type="radio" name="group1" value="opt1" checked>opt1</label></div>

supprimer la classe .desc de style et modifier comme divs -

<div id="opt1" class="desc">lorem ipsum dolor</div> 
<div id="opt2" class="desc" style="display: none;">consectetur adipisicing</div> 
<div id="opt3" class="desc" style="display: none;">sed do eiusmod tempor</div>

il regardera vraiment bon any- façons.

Source

2012-07-06 06:37:05 Bharat

cela m'a aidé, merci –

$(document).ready(function(){ 
    $("input[name=group1]").change(function() { 
     var test = $(this).val(); 
     $(".desc").hide(); 
     $("#"+test).show(); 
    }); 
});

Il est correct input[name=group1] dans cet exemple. Cependant, merci pour le code!

Source

2012-12-14 15:31:34

<script type="text/javascript"> 
$(function() { 
    $("[name=toggler]").click(function(){ 
      $('.toHide').hide(); 
      $("#blk-"+$(this).val()).show('slow'); 
    }); 
}); 
</script> 
</head> 
<body> 
<label><input id="rdb1" type="radio" name="toggler" value="1" />Book</label> 
<label><input id="rdb2" type="radio" name="toggler" value="2" />Non-Book</label> 

<div id="blk-1" class="toHide" style="display:none"> 

    <form action="success1.html"> 

     Name1:<input type="text" name="name"> 
      <input type="submit" name="submit"> 

    </form> 

</div> 
<div id="blk-2" class="toHide" style="display:none"> 

    <form action="success1.html"> 

     Name2:<input type="text" name="name"> 
      <input type="submit" name="submit"> 

    </form> 
</div>

Source

2013-07-10 11:21:18

Une solution intéressante est de faire ce déclarative: vous venez de donner à chaque div qui doit être montré un attribut automaticallyVisibleIfIdChecked avec l'id de la case à cocher ou le bouton radio dont elle dépend.Cela est, votre forme ressemble à ceci:

<form name="form1" id="my_form" method="post" action=""> 
    <div><label><input type="radio" name="group1" id="rdio1" value="opt1">opt1</label></div> 
    <div><label><input type="radio" name="group1" id="rdio2" value="opt2">opt2</label></div> 
</form> 
.... 
<div id="opt1" automaticallyVisibleIfIdChecked="rdio1">lorem ipsum dolor</div> 
<div id="opt2" automaticallyVisibleIfIdChecked="rdio2">consectetur adipisicing</div>

et ont une page JAVASCRIPT indépendante qui utilise bien la programmation fonctionnelle:

function executeAutomaticVisibility(name) { 
    $("[name="+name+"]:checked").each(function() { 
     $("[automaticallyVisibleIfIdChecked=" + this.id+"]").show(); 
    }); 
    $("[name="+name+"]:not(:checked)").each(function() { 
     $("[automaticallyVisibleIfIdChecked=" + this.id+"]").hide(); 
    }); 
} 

$(document).ready(function() { 
    triggers = $("[automaticallyVisibleIfIdChecked]") 
     .map(function(){ return $("#" + $(this).attr("automaticallyVisibleIfIdChecked")).get() }) 
    $.unique(triggers); 
    triggers.each(function() { 
     executeAutomaticVisibility(this.name); 
     $(this).change(function(){ executeAutomaticVisibility(this.name); }); 
    }); 
});

Similairement vous pouvez activer automatiquement/désactiver les champs forme avec un attribut automaticallyEnabledIfChecked.

Je pense que cette méthode est intéressante car elle évite d'avoir à créer un JavaScript spécifique pour votre page - il vous suffit d'insérer des attributs qui disent ce qui doit être fait.

Source

2014-08-07 18:40:07

Comment utiliser jQuery pour afficher/masquer les divs en fonction de la sélection du bouton radio?

Répondre

Questions connexes