Se presenta la sintaxis para conocer el valor de las propiedades de estos objetos.
13.1 Sintaxis básica para conocer el valor de todas las propiedades
Para trabajar con el valor de las propiedades de un checkbox o de un radio button se trabaja de manera distinta que con text y password. Aquí veremos primero, la sintaxis básica para conocer estos valores, y luego los aplicaremos a algunos ejemplos.
13.1.1 Valor de value
form.nombre_del_grupo[index].value
Ejemplo:
form.grupo1[0].value
form.grupo1[1].value
form.grupo1[2].value
13.1.2 Valor de name
form.nombre_del_grupo.name
Ejemplo:
form.grupo1.name
13.1.3 Valor de disabled
form.nombre_del_grupo[index].disabled
Ejemplo:
form.grupo1[0].disabled
form.grupo1[1].disabled
form.grupo1[2].disabled
13.1.4 Valor de checked
form.nombre_del_grupo[index].checked
Ejemplo:
form.grupo1[0].checked
form.grupo1[1].checked
form.grupo1[2].checked
13.1.5 Valor de length
form.nombre_del_grupo.length
Ejemplo:
form.grupo1.length
13.2 Ejemplos de aplicación II: trabajando con el valor de las propiedades
Como habrán podido observar en los ejemplos anteriores, seguramente notaron que para poder trabajar con un checkbox o un radio en forma particular, si pertenecen al mismo grupo, debe usarse el index. Por eso, decía anteriormente que conocer el valor de value es poco útil, a excepción que se necesite escribir ese valor en un campo de texto. Pero los ejemplos "combinados" entre distintos objetos los dejaremos para más adelante. Nos limitaremos ahora, a estos dos objetos.
Información del valor de todas las propiedades
El Script...
<script languaje="javascript">
function informar(form)
{
nombreCasilla = form.colores[0].name
valorCasilla = form.colores[0].value
valorDisabled = ""
valorChecked = ""
valorLength = form.colores.length
// definición de valorDisabled
if (form.colores[0].disabled == true)
{ valorDisabled = "está deshabilitada"; }
else
{ valorDisabled = "está habilitada"; }
// definición de valorChecked
if (form.colores[0].checked == true)
{ valorChecked = "está seleccionada"; }
else
{ valorChecked = "no está seleccionada"; }
nombreCasillaStr = "El nombre de la primer casilla es: " + nombreCasilla
valorCasillaStr = "El valor de la primer casilla es: " + valorCasilla
valorDisabledStr = "La primer casilla " + valorDisabled
valorCheckedStr = "Esta casilla " + valorChecked
valorLengthStr = "La cantidad total de casillas es: " + valorLength
// escribimos el mensaje de alerta
strAlerta = nombreCasillaStr + "\n" + valorCasillaStr + "\n" +
valorDisabledStr + "\n" + valorCheckedStr + "\n\n" + valorLengthStr
// lanzamos la acción
alert(strAlerta);
}
</script>
El formulario...
<form name="ejemplo1">
Colores:
Verde <input type="checkbox" name="colores" value="Verde"><br>
Azul <input type="checkbox" name="colores" value="Azul" disabled><br>
Rojo <input type="checkbox" name="colores" value="Rojo" disabled><br>
<input type="button" value="Mostrar información" onClick="informar(this.form)">
</form>
Los resultados...
13.3 Ejemplos de aplicación III: trabajando con propiedad checked
Lanzar una acción si un checkbox no se ha marcado
Aceptar los términos de un contrato antes de suscribir el formulario
El Script...
<script languaje="javascript">
function verificarCasilla(form)
{
if (form.acepto.checked == false)
{
alert("Debes aceptar los términos del contrato antes de continuar");
form.acepto.focus(); return true;
}
form.submit()
}
</script>
El formulario...
<form name="contrato">
<b>Formulario de suscripción al servicio de acceso a Internet 0610</b><br>
... campos del formulario ...<br>
...<br>
<input type="checkbox" name="acepto"> Acepto los términos del contrato de suscripción
<br>
<input type="button" value="Enviar" onClick="verificarCasilla(this.form)">
</form>
Los resultados...
Eugenia Bahit
Analista Programadora LAMP y Scrum Coach