¿Cómo ocultar y mostrar divs con nombre de acuerdo con el valor de radio?

0

Esta es bastante similar a mi otra pregunta sobre:

¿Cómo ocultar y mostrar divs con nombre de acuerdo con el valor de enumeración?

Sin embargo, la idea aquí es ligeramente diferente. La función toggle () jQuery está relacionada con un botón de radio que se codifica a continuación:

<div id="recurrent">
    <label for="recurrent">Recurrent? </label> 
    <input type="radio" id="idtrue" name="recurrent" value="true">Yes 
    <input type="radio" id="idfalse" name="recurrent" value="false" checked>No
</div>

El div para alternar es:

<div id="ifRecurrentTrue">
    /// something
</div>

Y el jQuery adaptado de la otra pregunta es:

$('#recurrent select').on('change', function () {
    var value = this.value;
    $('#ifRecurrentTrue').toggle(value == true);
}).change();

Apuesto a que es solo una cuestión de funciones diferentes, ¿verdad?

De nuevo, ¡gracias de antemano!

2
  • No vi el elemento con selectetiqueta 1 de marzo de 2016 a las 3:53
  • En realidad, no debería haber uno. Solo los botones de radio controlan lo que se muestra. Fue un error tipográfico ... 1 de marzo de 2016 a las 3:55
1

Necesita encontrar los inputelementos por su nombre, así que use el atributo es igual al selector en lugar del selector de elementos.select

$('#recurrent input[name="recurrent"]').on('change', function() {
  $('#ifRecurrentTrue').toggle(this.checked && this.id == 'idtrue');
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="recurrent">
  <label for="recurrent">Recurrent?</label>
  <input type="radio" id="idtrue" name="recurrent" value="true">Yes
  <input type="radio" id="idfalse" name="recurrent" value="false" checked>No
</div>

<div id="ifRecurrentTrue">
  /// something
</div>
5
  • ¡Arun, eres el hombre! Solo una pequeña cosa que olvidé agregar a la pregunta. En la carga de la página, <div id='recurrent'> ... </div>debería comenzar a desactivarse. 1 de marzo de 2016 a las 3:58
  • que debería funcionar en base a qué radio se selecciona, ¿no es así? eso debería funcionar ahora 1 de marzo de 2016 a las 4:01
  • antes de $('#recurrent input[name="recurrent"]').on('change', function() {agregar la $('#ifRecurrentTrue').toggle();inicialización del div desactivado. Sé que esto no es muy elegante, pero está funcionando ahora. ¡Gracias de nuevo! 1 de marzo de 2016 a las 4:06
  • o simplemente puedes decir <div id="ifRecurrentTrue" style="display: none"> 1 de marzo de 2016 a las 4:06
  • @gtludwig $('#ifRecurrentTrue').toggle();no será el método correcto, si prefiere que js haga esto, use$('#ifRecurrentTrue').hide(); 1 de marzo de 2016 a las 4:08
0

No vi el elemento con selectetiqueta en el código proporcionado, podría ser input. Reemplazar selectcon lo inputsiguiente:

$('#recurrent input').on('change', function () {
  var value = this.value;
  $('#ifRecurrentTrue').toggle(value == true);
}).change();
1
  • ¡Gracias por tu contribución! 1 de marzo de 2016 a las 4:06
0

    $(document).ready(function() {  
      $('input:radio[name=recurrent]').on('change', function () {
        var values = this.value;
        $('#ifRecurrentTrue').toggle(values =='true');        
    }).change();
      
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <div id="recurrent">
        <label for="recurrent">Recurrent? </label> 
        <input type="radio" id="idtrue" name="recurrent" value="true">Yes 
        <input type="radio" id="idfalse" name="recurrent" value="false" checked>No
    </div>
    <div id="ifRecurrentTrue">
        /// something
    </div>