web-dev-qa-db-fra.com

Comment utiliser jQuery pour afficher/masquer les divs en fonction du choix du bouton radio?

J'ai quelques boutons radio et j'aimerais que différents divs cachés apparaissent en fonction du bouton radio sélectionné. Voici à quoi ressemble le code HTML:

<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 le fais de cette façon est que mes boutons radio et mes divs sont générés de manière dynamique (la valeur du bouton radio aura toujours un div correspondant). Le code ci-dessus fonctionne partiellement - les divs montreront que le bon bouton est coché, mais je dois ajouter du code pour que les divs se cachent à nouveau une fois le bouton décoché. Merci!

jqueryradio-buttonmouseclick-event
35
M Thomas

Mise à jour 2015/06

Comme jQuery a évolué depuis la publication de la question, l’approche recommandée consiste maintenant à utiliser $.on

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

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

ou en dehors de $.ready()

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

Réponse originale

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

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

devrait marcher

45
Zlatev

Cachez-les simplement avant de les montrer:

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

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

7
Ste Yeu
<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>
5
Rajesh Hatwar

Une solution intéressante est de rendre ce déclaratif: vous donnez simplement à chaque div qui doit être montré un attribut automaticallyVisibleIfIdChecked avec l'id de la case à cocher ou du bouton radio dont il dépend. C'est-à-dire que votre formulaire 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 avez un code JavaScript indépendant de la page 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); } );
    });
});

De même, vous pouvez activer/désactiver automatiquement les champs de formulaire avec un attribut automaticallyEnabledIfChecked.

Je pense que cette méthode est agréable, car elle évite de créer du code JavaScript spécifique à votre page. Il vous suffit d'insérer des attributs indiquant ce qu'il convient de faire.

5
Hans-Peter Störr

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é, il suffit d’ajouter coché à la première option - 

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

supprimer la classe .desc du style et modifier les divs comme - 

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

ça ira vraiment bien de toute façon.

4
Bharat

Le code ci-dessous est parfaitement travaillé pour moi:

$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        var inputValue = $(this).attr("value");
        var targetBox = $("." + inputValue);
        $(".box").not(targetBox).hide();
        $(targetBox).show();
    });
});
.box{
        color: #fff;
        padding: 20px;
        display: none;
        margin-top: 20px;
    }
    .red{ background: #ff0000; }
    .green{ background: #228B22; }
    .blue{ background: #0000ff; }
    label{ margin-right: 15px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
        <label><input type="radio" name="colorRadio" value="red"> red</label>
        <label><input type="radio" name="colorRadio" value="green"> green</label>
        <label><input type="radio" name="colorRadio" value="blue"> blue</label>
    </div>
    <div class="red box">You have selected <strong>red radio button</strong> so i am here</div>
    <div class="green box">You have selected <strong>green radio button</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue radio button</strong> so i am here</div>

0
Pradeep