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.

Índice

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.

Deja una respuesta Cancelar la respuesta