Los objetos radio y checkbox

  • 06 de abril de 2004
  • Valoración:
  • 9 Comentarios
  • Scripts en Javascript
Propiedades, eventos y ejemplos de estos objetos contenidos en formularios.

12.1 Propiedades de los objetos

 

propiedad descripción

name

Es el nombre que identifica a un checkbox a un grupo de radio buttons. Para que éstos últimos conserven la capacidad de selección única, deben tener todos el mismo nombre.

value

Es un valor asociado a cada checkbox o radio.

 

En el caso de los checkbox es útil asignar a un grupo de éstos con el mismo name distintos valores. Pero si se quieres acceder a las propiedades de cada checkbox separadamente mediante JavaScript, es mejor utilizar un name diferente para cada checkbox, ya que de lo contrario (si todos tienen el mismo name) la propiedad value resulta poco útil.

 

En el caso de los radio buttons es una propiedad necesaria siempre al tener todos el mismo name,  aunque para su acceso mediante JavaScript, esta propiedad no es muy útil.

disabled

bloquea el checkbox o radio. Por lo tanto "No es enviado en el formulario" y "actúa como si no existiese".

checked

marca o comprueba si está marcado un checkbox o un radio. Es una propiedad booleana (que solo admite verdadero o falso) en la cual su valor será "true" (verdadero) si el objeto está marcado y "false" (falso) en caso que no lo esté.

length

es la cantidad de radio buttons que existe en un grupo determinado con el mismo name.

index array que contiene todos los radio buttons que hay en un grupo con el mismo nombre. Para un grupo de 5 radio buttons con mismo nombre y diferente valor cada uno, para referirnos al cuarto de ellos se debe usar la sintaxis:

 

formulario.nombre_radio[3]

 

 

12.2 Principales eventos

 

evento descripción

onFocus

Permite realizar una acción al poner el foco en el objeto.

onBlur Permite realizar una acción cuando el foco ya no se encuentra en el objeto.
onClick Permite realizar una acción cuando se hace click sobre el objeto.
onChange Evento que se produce al marcar/desmarcar un checkbox o un radio button.

 

12.3 Sintaxis básica

Para un grupo de radio buttons (mismo nombre distinto valor)

 

<input type="radio" name="color" value="rojo">

<input type="radio" name="color" value="verde">

 

Para un grupo de checkbox (mismo nombre distinto valor)

 

<input type="checkbox" name="colores" value="rojo">

<input type="checkbox" name="colores" value="verde">

 

12.3 Ejemplos de aplicación I: Trabajando con la propiedad disabled

Ejemplo #1

En este caso se habilitarán o deshabilitarán los checkbox dependiendo de la opción que seleccione el usuario de un grupo de dos radio buttons.


 

El Script...

 

<script languaje="javascript">

function habilita(form)

{
form.intereses[0].disabled = false;
form.intereses[1].disabled = false;
form.intereses[2].disabled = false;
}

function deshabilita(form)
{
form.intereses[0].disabled = true;
form.intereses[1].disabled = true;
form.intereses[2].disabled = true;
}
</script>

 

El Formulario...

 

<form name="ejemplo1">

¿Desea suscribirse a nuestro boletín de novedades? <br>

<input type="radio" name="boletin" value="si" checked onClick="habilita(this.form)"> SI, quiero suscribirme.

<input type="radio" name="boletin" value="no" onClick="deshabilita(this.form)"> No, gracias.

<br><br>

Seleccione los temas de su interés:<br>

<input type="checkbox" name="intereses" value="Arte y Cultura"> Arte y Cultura<br>

<input type="checkbox" name="intereses" value="Ciencia">Ciencia<br>

<input type="checkbox" name="intereses" value="Música">Música<br>

</form>

 

Los resultados...

¿Desea suscribirse a nuestro boletín de novedades?

SI, quiero suscribirme. No, gracias.


Seleccione los temas de su interés:
Arte y Cultura
Ciencia
Música

 

Ejemplo #2

En este caso se habilitarán o deshabilitarán los checkbox dependiendo del valor de la propiedad checked de otro checkbox.


 

El Script...

 

<script languaje="javascript">

function habilitaDeshabilita(form)

{

    if (form.boletin.checked == true)

    {

    form.intereses[0].disabled = false;
    form.intereses[1].disabled = false;
    form.intereses[2].disabled = false;

    }

 

    if (form.boletin.checked == false)

    {

    form.intereses[0].disabled = true;
    form.intereses[1].disabled = true;
    form.intereses[2].disabled = true;

    }

 

}
</script>

 

El Formulario...

 

<form name="ejemplo2">

¿Desea suscribirse a nuestro boletín de novedades? <input type="checkbox" name="boletin" value="ON" checked onClick="habilitaDeshabilita(this.form)"> SI, quiero suscribirme.

<br><br>

Seleccione los temas de su interés:<br>

<input type="checkbox" name="intereses" value="Arte y Cultura"> Arte y Cultura<br>

<input type="checkbox" name="intereses" value="Ciencia">Ciencia<br>

<input type="checkbox" name="intereses" value="Música">Música<br>

</form>

 

Los resultados...

¿Desea suscribirse a nuestro boletín de novedades? SI, quiero suscribirme.

Seleccione los temas de su interés:
Arte y Cultura
Ciencia
Música

 

Autor

Eugenia Bahit

Analista Programadora LAMP y Scrum Coach

Comentarios

Vincenzo

08/1/2007
Y si lo que quiero que quede deshabilitado por lo contrario no son otros checkboxes sino una caja de texto o un menu desplegable??
Por Ejemplo:
o Opcion 1
Cuadro de Texto 1
Cuadro de Texto 2

o Opcion 2
Cuadro de texto 3
Menu desplegable

Si escojo la opcion 1 el cuadro de texto y el Menu desplegable no estan habilitados y si escojo la opción 2 pues ni el cuadro de texto 1 ni el 2 pueden ser tocados por el usuario...

Alguien sabe como hacer esto??

rafaux

11/1/2008
Simplemente excelente, para lo que estoy realizando me sirvio de mucho gracias.

28/10/2008
la publicidad de hp, me tapa la mitad del artículo, y no la puedo cerrar

Leonardo

23/12/2008
Si se puede poner el mismo nombre a todos los checkbox y se recibe un array. En el nombre hay que poner []. Ej: minombre[].

De esa forma se comporta somo un select multiple

Misael Hdez.

20/8/2009
Felcitaciones por el código.
simplente una mina de código.

jose luis

19/1/2010
pasarlo a una pagina php por POST
como capturo el valor del checkbox , tengo un formulario con checkbox pero necesito capturar el valor y pasalo auna pagina php y recibirlo algo asi
$chk_deseacata=(isset($_POST['intereses'])); pero no me coge el valor

yibeth

20/10/2010
buena pagina
me parece muy buena esta pagina porque pormedio de esta puedo guiarme mas en como debo hacer un formulario muchas gracias.

Eduardo Gamero

08/8/2012
Incorrecto
En el checkbox los nombres TIENEN QUE SER DIFERENTES para poder ser chequeados en el servidor.
Por cada valor que esté tildado, el contenido de la variable estará seteado en "on" y habrá que chequearlo de esta manera (suponiendo que el método del formulario sea POST):
if ( $_POST['caso1'] == "on" ){ echo "<B>caso 1 tildado</B> "; };
if ( $_POST['caso2'] == "on" ){ echo "<B>caso 2 tildado</B> "; };
if ( $_POST['caso3'] == "on" ){ echo "<B>caso 3 tildado</B> "; };

Mogutaru

10/9/2012
Ahí va un ejemplo de cómo permitir seleccionar sólo una cantidad de checkbox, y poner en disabled el resto
&lt;html&gt;<br />
&lt;head&gt;<br />
&lt;script type=&quot;text/javascript&quot;&gt;<br />
<br />
function maximoCheckboxarCheckbox(nombre, maximoCheckbox){<br />
//1) Contamos el número de checkbox que tiene el grupo (con el mismo &quot;name&quot;)<br />
for (var i=0; i&lt;nombre.length; i++){<br />
nombre[i].onclick=function(){<br />
var num_chequeados=0;<br />
<br />
for (var i=0; i&lt;nombre.length; i++)<br />
num_chequeados+=(nombre[i].checked)? 1 : 0;<br />
<br />
//2) Miramos si se ha llegado a checkear el máximo. <br />
if (num_chequeados==maximoCheckbox){ <br />
//3) Ponemos en disabled a los que no.<br />
for (var i=0; i&lt;nombre.length; i++){<br />
if(nombre[i].checked==false){<br />
nombre[i].disabled = true;<br />
}<br />
}<br />
//4)Si no se ha llegado a checkear el máximo, volvemos a poner a todos en &quot;activo&quot;<br />
}else{<br />
for (var i=0; i&lt;nombre.length; i++){<br />
nombre[i].disabled = false;<br />
}<br />
}<br />
}<br />
}<br />
}<br />
<br />
&lt;/script&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
<br />
&lt;form name=&quot;formulario&quot;&gt;<br />
&lt;input type=&quot;checkbox&quot; name=&quot;nombre_elemento&quot; /&gt; Elemento 1&lt;br /&gt;<br />
&lt;input type=&quot;checkbox&quot; name=&quot;nombre_elemento&quot; /&gt; Elemento 2&lt;br /&gt;<br />
&lt;input type=&quot;checkbox&quot; name=&quot;nombre_elemento&quot; /&gt; Elemento 3&lt;br /&gt;<br />
&lt;input type=&quot;checkbox&quot; name=&quot;nombre_elemento&quot; /&gt; Elemento 4&lt;br /&gt;<br />
&lt;input type=&quot;checkbox&quot; name=&quot;nombre_elemento&quot; /&gt; Elemento 5&lt;br /&gt;<br />
&lt;/form&gt;<br />
<br />
&lt;script type=&quot;text/javascript&quot;&gt;<br />
// Podemos llamar a la función usando la siguiente línea, o poniendo:<br />
// [[[ onclick=&quot;maximoCheckboxarCheckbox(document.forms.formulario.nombre_elemento, 2);&quot; ]]]<br />
// ...en cada input checkbox<br />
maximoCheckboxarCheckbox(document.forms.formulario.nombre_elemento, 2);<br />
&lt;/script&gt;<br />
<br />
&lt;/body&gt;<br />
&lt;/html&gt;

Compartir