Cómo mostrar ocultar DIV usando CHECKBOX

Cómo mostrar ocultar DIV usando CHECKBOX?. Lo que haremos será trabajar en un div al hacer clic con el mouse usando jQuery, use el método toggle(). Por lo tanto, al hacer clic con el mouse, el div será visible y al hacer clic nuevamente en el div, se oculta de manera automática.

Estas opciones podemos trasladarlo al hacer click sobre un CHEKBOX.

Mostrar ocultar DIV usando CHECKBOX

Para mostrar/ocultar un elemento div por id:

  • Acceda a la propiedad style.display en el elemento div.
  • Si el valor de la propiedad de visualización se establece en none, configúrelo en block.
  • De lo contrario, establezca el valor en ninguno.

Vamos a implementar un ejemplo de mostrar / ocultar el conjunto de campos «respuesta» (el valor predeterminado está oculto) después de hacer clic en la casilla de verificación en el conjunto de campos.

Primera forma

<fieldset class="question">
<label for="coupon_question">Do you have a coupon?</label>
<input class="coupon_question" type="checkbox" name="coupon_question" value="1" />
<span class="item-text">Yes</span>
</fieldset>

<fieldset class="answer">
<label for="coupon_field">Your coupon:</label>
<input type="text" name="coupon_field" id="coupon_field"/>
</fieldset>

Script jQuery

Usaremos una condicional jQuery para detectar si la casilla de verificación está marcada o no y de esa opción mostrara el DIV

$(".answer").hide();
$(".coupon_question").click(function() {
if($(this).is(":checked")) {
$(".answer").show();
} else {
$(".answer").hide();
}
});

Segunda forma

Adjunte el evento onchange a la casilla de verificación:

<input class="coupon_question" type="checkbox" name="coupon_question" value="1" onchange="valueChanged()"/>

<script type="text/javascript">
function valueChanged()
{
if($('.coupon_question').is(":checked")) 
$(".answer").show();
else
$(".answer").hide();
}
</script>

Tercera forma

Más simple, y también cambié la clase de casilla de verificación a ID:

$(function() {
$("#coupon_question").on("click",function() {
$(".answer").toggle(this.checked);
});
});

Style css

Esta opción es muy importante porque al inicio el DIV debe estar oculto con la propiedad «display:none» y la clase se llamara «answer»

.answer { display:none }

Estructura HTML

Por ejemplo, estamos planteando un ejemplo para poder mostrar un cupón a los usuarios

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<fieldset class="question">
<label for="coupon_question">Do you have a coupon?</label>
<input id="coupon_question" type="checkbox" name="coupon_question" value="1" />
<span class="item-text">Yes</span>
</fieldset>

<fieldset class="answer">
<label for="coupon_field">Your coupon:</label>
<input type="text" name="coupon_field" id="coupon_field" />
</fieldset>

jQuery. Visualizar y/o ocultar div al hacer clic con el mouse

Este otro ejemplo nos ayudara con el proceso en una etiqueta DIV usando el identificador llamado “show«. Por lo tanto, para este ejemplo usaremos toggle con la opción «slide» para darle un efecto a la hora de mostrar u ocultar el DIV.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#show').click(function() {
$('.menu').toggle("slide");
});
});
</script>
</head>
<body>

<div id="show">Click to Show/ Hide div</div>
<div class="menu" style="display: none;">
<ol>
<li>India</li>
<li>US</li>
<li>UK</li>
<li>Australia</li>
</ol>
</div>
</body>
</html>

Resumen

En este articulo hemos aprendido a mostrar y ocultar DIV con jQuery haciendo uso de varias opciones, uno de ellos usando una casilla de verificación (CHECKBOX).

Además, hemos hecho uso del método toggle() para crear una interfaz amigable al evento click

Esperamos que puedan aplicar este ejemplo en sus proyectos web.

Me fascina la programación en diversos lenguajes y mas aún si son sistemas web o páginas web.

Entradas relacionadas

Integrar Bootstrap 3 Badge Colors

Integrar Bootstrap 3 Badge Colors

En este artículo vamos a integrar colores de fondo en la clase BADGE de Bootstrap 3. Integrar Bootstrap 3 Badge Colors. En el framework Bootstrap 3 por…

5 formar de validar checkbox

5 formar de validar checkbox

5 formar de validar checkbox. Aquí mostrare varias formas de validar checkbox usando jQuery y JavaScript, también usaremos funciones a nivel de formulario. Aquí debéis fijaros que…

Enviar formulario usando checkbox

Enviar formulario usando checkbox

Enviar formulario usando checkbox. En este articulo veremos una forma de enviar un formulario HTML usando una casilla o varias casillas de verificación (checkbox). Por lo tanto,…

Limpiar Select2 jQuery

Limpiar Select2 jQuery: Ejemplo completo

Limpiar Select2 jQuery. En este articulo aprenderemos a restablecer para mostrar el marcador de posición select2. JQuery Select2 restablece y luego muestra el marcador de posición. Por…

Evitar duplicados al importar MySQL y PHP

Evitar duplicados al importar MySQL y PHP

Evitar duplicados al importar MySQL y PHP. La mayoría de sistemas web o de escritorio trabajan con importación de registros hacia la base de datos para optimizar…

Array dentro de ciclo Foreach PHP

Array dentro de ciclo Foreach PHP: ejemplo completo

Array dentro de ciclo Foreach PHP. A veces se requiere validar si existe un elemento de un ARRAY dentro de un ciclo While o ciclo foreach en…

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *