mismo - ¿Cómo se usa jQuery para mostrar/ocultar los divs según la selección del botón de selección?

mostrar y ocultar div con jquery ejemplos

Question

Tengo algunos botones de opción y me gustaría que aparecieran diferentes div ocultos según el botón de opción seleccionado. Así es como se ve el 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>

Y aquí está mi jQuery:

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

La razón por la que lo hago de esa manera es porque mis botones de radio y divs se están generando dinámicamente (el valor del botón de radio siempre tendrá un div correspondiente). El código anterior funciona parcialmente: los divs se mostrarán cuando se marque el botón correcto, pero necesito agregar algún código para ocultar los divs una vez que el botón esté desmarcado. ¡Gracias!

Answer 1

La fuente simple de jquery para el mismo -

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

Para que sea un poco más apropiado simplemente agregue seleccionado a la primera opción -

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

eliminar la clase .desc del estilo y modificar divs como -

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

realmente se verá bien de todos modos.

Answer 2

Solo ocúltelos antes de mostrarlos:

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

Answer 3

Una solución interesante es hacer que esto sea declarativo: simplemente le da a cada div que se debe mostrar un atributo de forma automaticallyVisibleIfIdChecked con la identificación de la casilla de verificación o el botón de radio del que depende. Es decir, su formulario se ve así:

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

y tiene un JavaScript independiente de la página que muy bien usa programación funcional:

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 forma similar, podría habilitar / deshabilitar automáticamente los campos de formulario con un atributo automaticallyEnabledIfChecked habilitado.

Creo que este método es bueno, ya que evita tener que crear JavaScript específico para su página, simplemente inserta algunos atributos que dicen lo que se debe hacer.

Answer 4

Actualización 2015/06

Como jQuery ha evolucionado desde que se publicó la pregunta, el enfoque recomendado ahora es usar $.on

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

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

o fuera de $.ready()

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

Respuesta original

Debe usar el controlador de eventos .change() :

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

Deberia trabajar

Answer 5

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

Es la input[name=group1] correcta input[name=group1] en este ejemplo. Sin embargo, gracias por el código!

Answer 6

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