Los objetos radio y checkbox II

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

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

 

 

Autor

Eugenia Bahit

Analista Programadora LAMP y Scrum Coach

Compartir

Comentarios

Lalo

31/1/2005
que pasa si lo que quiero es mandar los valores de un radio pero estos deberan ser enviados en forma de arreglo
Es decir si tengo algo de este estilo
<input type=radio name=variables[]....>

Cecilia

21/12/2005
Muy bueno este apunte!!!
Felicitaciones

Lito Granada

23/11/2007
Muchas graciassssss... llevaba un buen rato rompiéndome la cabeza y resulta que (como siempre) era más fácil de lo que parecía.

Carlos

09/5/2011
Tarde
Me sale la alerta, pero me envía el formulario igualmente al darle a aceptar.
¿De qué puede ser?