Los objetos radio y checkbox II

Valoración del artículo:
Se presenta la sintaxis para conocer el valor de las propiedades de estos objetos.
Publicado: 06/4/04
Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

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

Colores:

Verde
Azul
Rojo

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

Formulario de suscripción al servicio de acceso a Internet 0610
... campos del formulario ...
...
Acepto los términos del contrato de suscripción

 

 

Comentarios
Fueron enviados 3 comentarios al artículo
3 comentarios no revisados
0 comentarios revisados

Manuales relacionados
Categorias relacionadas
El autor
Eugenia Bahit
Desarrolladora ASP y PHP
Lectura recomendada
Compra este libro en Agapea, la librería urgente a domicilio.
Últimas noticias
Alojados en el grupo