wake-up-neo.com

Wie kann man mit jQuery Divs basierend auf der Auswahl der Optionsfelder anzeigen/ausblenden?

Ich habe einige Optionsfelder und ich möchte, dass verschiedene versteckte Divs angezeigt werden, je nachdem, welches Optionsfeld ausgewählt ist. So sieht das HTML aus:

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

Und hier ist meine jQuery:

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

Ich mache das so, weil meine Optionsfelder und Divs dynamisch generiert werden (der Wert des Optionsfelds hat immer ein entsprechendes Div). Der obige Code funktioniert teilweise - die Divs werden angezeigt, wenn die richtige Schaltfläche markiert ist. Ich muss jedoch etwas Code hinzufügen, damit die Divs wieder ausgeblendet werden, wenn die Schaltfläche nicht markiert ist. Vielen Dank!

35
M Thomas

Update 2015/06

Da sich jQuery seit der Veröffentlichung der Frage weiterentwickelt hat, wird jetzt $.on empfohlen.

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

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

oder außerhalb $.ready()

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

Ursprüngliche Antwort

Sie sollten den .change()-Ereignishandler verwenden:

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

sollte arbeiten

45
Zlatev

Verstecken Sie sie einfach, bevor Sie sie zeigen:

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

In diesem Beispiel ist input[name=group1] korrekt. Danke aber für den 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

Eine interessante Lösung ist es, dies deklarativ zu machen: Sie geben einfach jedem Div, das angezeigt werden soll, ein Attribut automaticallyVisibleIfIdChecked mit der ID des Kontrollkästchens oder Optionsfelds, von dem es abhängig ist. Ihr Formular sieht also so aus:

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

und haben einige seitenunabhängige JavaScript, die funktionale Programmierung verwenden:

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

Ebenso können Sie Formularfelder mit dem Attribut automaticallyEnabledIfChecked automatisch aktivieren/deaktivieren.

Ich denke, dass diese Methode Nizza ist, da es nicht erforderlich ist, ein spezifisches JavaScript für Ihre Seite zu erstellen. Sie fügen einfach einige Attribute ein, die angeben, was zu tun ist.

5

Die einfache Jquery-Quelle für dasselbe - 

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

Um es etwas passender zu machen, füge einfach die erste Option markiert hinzu - 

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

entfernen Sie die .desc-Klasse vom Styling und ändern Sie divs wie - 

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

es wird auf jeden Fall gut aussehen.

4
Bharat

Der folgende Code ist perfekt für mich:

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