Checkboxes, Radio Buttons, Selects

Checkboxes

Las áreas y campo de texto son sólo dos tipos de elementos. Ahora veremos las cajas de verificación o checkbox, radio buttoms y selects.

Si tiene un formulario llamado el_form y un checkbox llamado el_checkbox puede ver si el checkbox ha sido tildado con esto:

var is_checked = window.document.el_form.el_checkbox.checked;

if (is_checked == true)

{

alert("Si está tildado!");

} else {

alert("No está tildado.");

}

Como puede ver, si un checkbox esta tildado, la propiedad checked será verdadera. True esta incorporado a JavaScript como un tipo de dato, por lo tanto no lo tiene que poner entre comillas. Si checkbox no está tildado, la propiedad será falsa (false).

De la misma forma que puede leer la propiedad checked, puede establecer dicha propiedad.

Ejemplo29_0.html

En la Parte B del ejemplo29_0.html puede observar como establecer la propiedad a un checkbox.

 

Analice la Parte B y C para tener en claro como cambiar propiedades de otros objetos.

Radio Buttons

Afortunadamente, radio buttons son similares a los checkbox con respecto a JavaScript. La única diferencia real está en el HTML. Checkboxes son dispositivos on/off. Si un checkbox está tildado, lo puede desmarcar o viceversa. Radio buttons son diferente. Una vez que un radio button está encendido (on), permanecerá en ese estado hasta que otro sea seleccionado. En ese momento el primero entra en off.

Ejemplo30_0.html

En la parte A del ejemplo30_0.html, presione distintos integrantes de Los Tres Chiflados, como puede ver, no puede simplemente desactivar un radio button, sino que tiene que elegir otro.

Teniendo esto presente, podemos rehacer el ejemplo de la llave de luz con dos radio buttons en lugar de checkbox.

 

Para ello diríjase a la Parte B del ejemplo y vea que sucede presionando los distintos botones.

Cuando se presiona el primer botón, se llama la función offButton().

Analice la Parte B para tener en claro como funcionan las funciones offButton() y onButton()

Selects

Los Selects son los elementos más extraños dentro de los formularios. Existen dos clases primarias, menús y listas.

 

Ejemplo31_0.html

En la Parte A encontramos los dos tipos, menús desplegables y listas.

La cosa que hace al objeto select extraño es que el select tiene un nombre, pero ninguna de sus opciones lo tienen. Por ejemplo, el HTML para el primer select es:

<select name="pulldown_1" size=1>
<option>probiscus
<option>spider
<option>lemur
<option>chimp
<option>gorilla
<option>orangutan
</select>

 

Note que todo el select tiene el nombre pulldown_1, pero las opciones individuales no tienen nombre, esto hace difícil acceder a las opciones individuales.

Afortunadamente, a través de la magia de los arreglos y objetos, existe un modo de acceder y cambiar las opciones de un select. Si quiere modificar la segunda opción del menú, ingresará:

window.document.form_1.pulldown_1.options[1].text = 'new_text';

 

Esto funciona debido a que los elementos select tienen las propiedades de las opciones en un arreglo. Puede buscar una de las opciones en el arreglo y modificar su propiedad. Trate de hacer esto y luego busque en el menú para ver que realmente haya cambiado.

Cuando se elige una opción en el select, la propiedad selectedIndex será el valor del arreglo de la opción seleccionada. Para verificar esto elija una de las opciones de la lista. Recuerde que las opciones comienzan desde el valor cero.

La línea usada para verificar esto es:

<a href="#" onClick=
"alert('índice es: ' + window.document.form_1.list_1.selectedIndex);
return false;">check the index.</a>

 

Como cualquier otro elemento, el elemento select tiene un manejador: onChange(). Éste es llamado cada vez que se produce un cambio en el select.

Establecer el foco a un determinado elemento

Es cómodo cuando uno ingresa a una página, que el primero elemento quede en foco, sin la necesidad de tener que ponerlo en foco por medio del mouse. Ta. como ocurre cuando uno ingresa a Google, el texto automáticamente queda en foco.

 

Esto generalmente se establece al momento de cargar la página con la siguiente instrucción:

<body onLoad="setfocus()">

 

Obviamente en el tag header tenemos que definir la función setfocus de la siguiente forma:

function setfocus() {

document.first.text1.focus();

}

 

Este script pondría en foco el primer elemento text1 del formulario first.

<<<Anterior - Inicio>>>