Skip to main content
se eliminaron 82 caracteres en el cuerpo
Origen Enlace
Einer
  • 20.6k
  • 2
  • 17
  • 39

Utiliza el metodo toggleClass que elimina o agrega una clase. Entonces en el css agregas una regla css que ocultaraIntenta asignandole el elementomismo nombre al radio para que la tenga aplicadasiempre haya un solo seleccionado. Asi, siLuego se le dade clic al radio muestras el div o lo ocultalas utilizando checkboxaddClass(), entonces agregamos o quitamos la clase que oculta el div y removeClass():

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

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

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

<div class="oculto" id="div2">
Div 2
</div>

Utiliza el metodo toggleClass que elimina o agrega una clase. Entonces en el css agregas una regla css que ocultara el elemento que la tenga aplicada. Asi, si se le da clic al checkbox, entonces agregamos o quitamos la clase que oculta el div:

$("#ocultar1").change(function(){
  $("#div1").toggleClass('oculto');
});

$("#ocultar2").change(function(){
  $("#div2").toggleClass('oculto');
});
.oculto{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" id="ocultar1" /> Ocultar 1 
  
  <input type="checkbox" id="ocultar2" /> Ocultar 2
</div>

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

<div class="oculto" id="div2">
Div 2
</div>

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>

   

Origen Enlace
Einer
  • 20.6k
  • 2
  • 17
  • 39

Utiliza el metodo toggleClass que elimina o agrega una clase. Entonces en el css agregas una regla css que ocultara el elemento que la tenga aplicada. Asi, si se le da clic al checkbox, entonces agregamos o quitamos la clase que oculta el div:

$("#ocultar1").change(function(){
  $("#div1").toggleClass('oculto');
});

$("#ocultar2").change(function(){
  $("#div2").toggleClass('oculto');
});
.oculto{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" id="ocultar1" /> Ocultar 1 
  
  <input type="checkbox" id="ocultar2" /> Ocultar 2
</div>

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

<div class="oculto" id="div2">
Div 2
</div>