<!DOCTYPE html>
<html>
<head>
<title>Ejercicio css display:none</title>
<meta charset="utf-8"/>
<meta name="author" content="Victor Hernandez"/>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<style>
/*Instrucciones CSS*/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.derecha{
width:600px;
padding:20px;
border:1px solid #000;
margin:20px 50px;
display:inline-block;
/*float:left;*/
}
.derecha{
background-color:#ccc;
}
.caja-1{
width:150px;
height:60px;
border:1px solid #000;
margin:10px;
background-color:#395fdd;
float:left;
display:block;
color:#fff;
font-weight:bold;
font-size:18px;
}
.caja-3{
width:150px;
height:160px;
border:1px solid #000;
margin:10px;
background-color:#439104;
float:left;
display:flexbox;
color:#fff;
font-weight:bold;
font-size:18px;
/* display:none;*/
}
.derecha .caja-3{display:none;}
</style>
<script>
$(document).ready(function(){
$("#mostrar").on( "click", function() {
$('.caja-3').css('visibility', 'visible');
if( $('.caja-3').is(":visible") ) {
$('.caja-3').css('display', 'none');
} else {
$('.caja-3').css('display', 'block');
}
});
// Comprobar cuando cambia un checkbox
$('input[type=checkbox]').on('change', function() {
if ($(this).is(':checked') ) {
// alert("Checkbox " + $(this).prop("id") + " (" + $(this).val() + ") => Seleccionado");
$('.caja-3').css('display', 'block');
} else {
// alert("Checkbox " + $(this).prop("id") + " (" + $(this).val() + ") => Deseleccionado");
$('.caja-3').css('display', 'none');
}
});
/* tambien es valido haerlo asi */
/* tambien es valido haerlo asi */
$( '#xFecha1' ).on( 'click', function() {
if( $(this).is(':checked') ){
// Hacer algo si el checkbox ha sido seleccionado
alert("El checkbox con valor " + $(this).val() + " ha sido seleccionado");
} else {
// Hacer algo si el checkbox ha sido deseleccionado
alert("El checkbox con valor " + $(this).val() + " ha sido deseleccionado");
}
});
</script>
</head>
<body>
<div class="derecha">
<!-- div.caja-$*6 -->
<div class="caja-1">1</div>
<div class="caja-2"> <input type="checkbox" id="xFecha1" name="xFecha1" value="1">
<label for="Fecha1">Fecha</label><br>
</div>
<div class="caja-3">
</div>
</div>
<br>
</body>
</html>
No hay comentarios:
Publicar un comentario