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.displayen 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.
