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

Tengo algunos botones de opción y me gustaría que aparecieran diferentes div ocultos según el botón de opción seleccionado. Esto es lo que el HTML se parece a:¿Cómo se usa jQuery para mostrar/ocultar los divs según la selección del botón de selección?

<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 estoy haciendo de esa manera es porque mis botones de radio y divs se generan de forma dinámica (el valor de el botón de opción 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!

Fuente

2010-05-05 M Thomas

Niza Pregunta .... –

Como se mencionó @ ste-Yeu, por favor, corregir el selector a 'grupo 1' en su jQuery :) –

Actualización 2015/06

Como jQuery ha evolucionado desde la cuestión fue publicada, el enfoque recomendado ahora está utilizando $.on

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

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

o fuera $.ready()

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

original respuesta

Debe utilizar .change() controlador de eventos:

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

debería funcionar

Fuente

2010-05-05 22:13:45 Zlatev

Sólo hay que ocultar antes de mostrarlos:

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

Fuente

2010-05-05 22:14:20 albertein

gracias, eso es exactamente lo que necesitaba –

Gracias hombre éste me ayudó .... –

La fuente jQuery simple para el mismo -

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

Con el fin de hacer que poco más apropiada sólo tiene que añadir a comprobar primera opción -

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

clase remove .desc de estilismo 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>

lo que realmente va a quedar bien Any- formas.

Fuente

2012-07-06 06:37:05 Bharat

esto me ayudó, gracias –

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

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

Fuente

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>

Fuente

2013-07-10 11:21:18

Una solución interesante es hacer de este declarativa: sólo tiene que dar a cada div que se debe mostrar un atributo automaticallyVisibleIfIdChecked con el id del botón de casilla o radio de la que depende.Es decir, su forma se parece a esto:

<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 tener alguna página de JavaScript independiente que utiliza muy bien la 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); }); 
    }); 
});

Similarmente podría permitir de forma automática/desactivar los campos de formulario con un atributo automaticallyEnabledIfChecked.

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.

Fuente

2014-08-07 18:40:07

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

Respuesta

Cuestiones relacionadas