4

buenos dias.

El detalle es que tengo dos inputs radio, el cual al dar click a uno de ellos quiero que me muestre un div que esta oculto al abrir la pagina, e intentado varios métodos y ninguno funciona, esto lo quiero hacer en javascript, he intentado con:

$("input[type=radio]").on("change",function()

$('input:radio[name=bedStatus]:checked').change(function () {})

y aun no encuentro solución, quiero acceder al evento change del radio

3
  • $('input[name=bedStatus]').on('change', function() { ... }); ese es el código básico para el input con ese nombre. Como no tenemos el resto del código, poco más podemos hacer...
    – Zander
    Commented el 26 oct. 2017 a las 15:48
  • 1
    Podrías incluír tu html para poder hacer pruebas por favor
    – Yikarus
    Commented el 26 oct. 2017 a las 15:48
  • <input type="radio" name="bedStatus" data-radio="iradio_minimal-blue" id="Fechas" value="1"> Commented el 26 oct. 2017 a las 15:51

3 respuestas 3

6

Básicamente, para saber si un radio esta checkeado o no debes hacer lo siguiente:

$("input[name=bedStatus]").click(function() {  
    if($(this).is(':checked')) {  
       $("#contenido").fadeIn();
    } 
 }); 
#contenido{
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="radio" name="bedStatus" id="bedStatus">
<label for="bedStatus">Mostrar contenido</label>

<div id="contenido">Soy el contenido</div>

3

Deberías utilizar el evento click:

$(function(){
  $('#ocultar').click(function(){
    $('#ocultar-mostrar').addClass('oculto');
  });
  $('#mostrar').click(function(){
    $('#ocultar-mostrar').removeClass('oculto');
  });

});
div{
  padding: 10px;
  font-size: 24px;
  border: solid 1px black;
}

.oculto{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="bedStatus" id="mostrar" value="mostrar">
<label for="mostrar">Mostrar</label>
<input type="radio" name="bedStatus" id="ocultar" value="ocultar" checked>
<label for="ocultar">Ocultar</label>


<div id="ocultar-mostrar" class="oculto">
  Div oculto
</div>

3

Intenta asignandole el mismo nombre al radio para que siempre haya un solo seleccionado. Luego se le de clic al radio muestras el div o lo ocultalas utilizando addClass() y removeClass():

$("#ocultar2").change(function(){
  $("#div1").addClass('oculto');
});

$("#ocultar1").change(function(){
  $("#div1").removeClass('oculto');
});
.oculto{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="radio" name="nombreInput" id="ocultar1" /> Mostrar  
  
  <input type="radio"  name="nombreInput" id="ocultar2" /> Ocultar 
</div>

<div class="oculto" id="div1">
Div 1
</div>

   

1
  • 1
    El posteador pide la solución con un radiobutton y no un checkbox no podemos saber si cambiar el input afecte al resto de su aplicación
    – Yikarus
    Commented el 26 oct. 2017 a las 15:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.