Mostrar u ocultar elementos como respuesta a un evento - I

Ahora que ya sabemos cómo realizar un cambio en el atributo display, vamos a ver cómo poner esta instrucción en marcha cuando el usuario realice acciones en la página. Recordar que al principio del artículo comentaba que íbamos a crear un formulario con una casilla de selección (campo checkbox) y que al activar ese campo se mostrarían otros contenidos en el formulario. Al desactivarlo, se ocultarían esos contenidos del formulario. Para entender bien lo que deseamos hacer, podemos ver el ejercicio en marcha en una página aparte. Lo primero que podemos presentar es el formulario con el que vamos a trabajar.

<form>
Nombre: <input type="text" name="nombre">
<br>
<input type="checkbox" name="mayor_edad" value="1" id="mayoria_edad"> Soy mayor de edad
<br>
<div id="formulariomayores" style="display: none;">
Dato para mayores de edad: <input type="text" name="mayores_edad">
</div>
</form>

Como se podrá ver, es un formulario como otro cualquiera. Sólo que tiene una capa con id="formulariomayores", que contiene los elementos del formulario que queremos mostrar u ocultar al marcar o desmarcar el checkbox. Esa capa estará inicialmente oculta, y para ello hemos colocado el atributo style="display: none;". Podemos fijarnos también en el checkbox con id="mayoria_edad", que es el que va servir para marcar si se desea o no ver la parte final del formulario. Ahora hay que hacer cosas cuando se haga clic en el checkbox con id="mayoria_edad". Para ello en deberíamos crear un código Javascript y jQuery como este:

$(document).ready(function(){

$("#mayoria_edad").click(function(){

//lo que se desee hacer al recibir un clic el checkbox

});

});

Como ya hemos comentado, estas líneas sirven para especificar eventos. $(document).ready() se hace para lanzar instrucciones cuando el navegador está preparado para recibirlas y $("#mayoria_edad").click() sirve para realizar acciones cuando se ha hecho clic sobre el elemento con id "mayoria_edad", que es el checkbox del formulario. (Lee el artículo Pasos para trabajar con jQuery para más información sobre este punto). Ahora tenemos que ver las instrucciones que debemos ejecutar como respuesta a ese evento.

if ($("#mayoria_edad").attr("checked")){
$("#formulariomayores").css("display", "block");
}else{
$("#formulariomayores").css("display", "none");
}