1

necesito que el contenido de un checkbox desmarcado se oculte al marcar otro checkbox.

Imagen del problema:

introducir la descripción de la imagen aquí

Js

    <script>
$('#alternar').click(function(){
    $('#prueba').toggle();
});
$(".placeholder").select2({
    placeholder: "Make a Selection",
    allowClear: true
});
 </script>
<script>
$('#alternarpaypal').click(function(){
    $('#pruebapaypal').toggle();
});
$(".placeholder").select2({
    placeholder: "Make a Selection",
    allowClear: true
}); 
</script>

Html:

<input type="radio" class="new-control-input" name="custom-radio-2" id="alternar"/>
    
    
    <div id="prueba">
    "CONTENIDO CHECKBOX 1"

                                        </div>

  <input type="radio" class="new-control-input" name="custom-radio-1" id="alternarpaypal"/>
      
    <div id="pruebapayal">
                  "CONTENIDO CHECKBOX 2"
</div>

Css

 <style>
#prueba{
  
   display:none
}
#pruebapaypal{
  
  display:none
}

</style>

lo que necesito es que se oculte el contenido del checkbox que este desmarcado no tengo mucho conocimiento en js y necesito lograr esto, gracias.

1 respuesta 1

0

Creando una clase de estilos con un display:none, y utilizando classList.add y classList.remove para agregarla y removerla puedes conseguir ese comportamiento. Adicionalmente cambie el radio por un checkbox.

const contenido2 = document.getElementById("pruebapayal")
const checkbox2 = document.getElementById("alternarpaypal");

checkbox2.addEventListener("change", (evento) => {
  if (evento.target.checked) {
    contenido2.classList.add("pruebapayal");
  }else {
    contenido2.classList.remove("pruebapayal");
  }
  
});
.pruebapayal {

  display: none;
}
<input type="radio" class="new-control-input" name="custom-radio-2" id="alternar"/>
    
    
    <div id="prueba">
    "CONTENIDO CHECKBOX 1"

                                        </div>

  <input type="checkbox" class="new-control-input" name="custom-radio-1" id="alternarpaypal"/>
      
    <div id="pruebapayal">
                  "CONTENIDO CHECKBOX 2"
</div>

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.