Control de Checkbox en Javascript

  • Por
Capítulo sobre el control del elemento de formulario tipo checkbox o caja de verificación. Estudiamos sus métodos y propiedades, con ejemplos.

Los checkbox son las unas cajas que permiten marcarlas o no para verificar alguna cosa en un formulario. Podemos ver una caja checkbok a continuación.

Los checkbox se consiguen con la etiqueta <INPUT type=checkbox>. Con el atributo NAME de la etiqueta <INPUT> le podemos dar un nombre para luego acceder a ella con javascript. Con el atributo CHECKED indicamos que el campo debe aparecer chequeado por defecto.

Con Javascript, a partir de la jerarquía de objetos del navegador, tenemos acceso al checkbox, que depende del objeto form del formulario donde está incluido.

Propiedades de un checkbox

Las propiedades que tiene un checkbox son las siguientes.

checked

Informa sobre el estado del checkbox. Puede ser true o false.

defaultChecked

Si está chequeada por defecto o no.

value

El valor actual del checkbox.

También tiene las propiedades form, name, type como cualquier otro elemento de formulario.

Métodos del checkbox

Veamos la lista de los métodos de un checkbox.

click()

Es como si hiciésemos un click sobre el checkbox, es decir, cambia el estado del checkbox.

blur()

Retira el foco de la aplicación del checkbox.

focus()

Coloca el foco de la aplicación en el checkbox.

Para ilustrar el funcionamiento de las checkbox vamos a ver una página que tiene un checkbox y tres botones. Los dos primeros para mostrar las propiedades checked y value y el tercero para invocar a su método click() con objetivo de simular un click sobre el checkbox.

<html> 
<head> 
   	<title>Ejemplo Checkbox</title> 
<script> 
function alertaChecked(){ 
   	alert(document.miFormulario.miCheck.checked) 
} 
function alertaValue(){ 
   	alert(document.miFormulario.miCheck.value) 
} 
function metodoClick(){ 
   	document.miFormulario.miCheck.click() 
} 
</script> 
</head>

<body> 
<form name="miFormulario" action="mailto:promocion@guiarte.com" enctype="text/plain"> 
<input type="checkbox" name="miCheck"> 
<br> 
<br> 
<input type="button" value="informa de su propiedad checked" onclick="alertaChecked()"> 
<input type="button" value="informa de su propiedad value" onclick="alertaValue()"> 
<br> 
<br> 
<input type="button" value="Simula un click" onclick="metodoClick()"> 
</form> 
</body> 
</html>

Puede verse la página en funcionamiento aquí.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Victor Monzalvo

07/3/2003
Solo quiero comentar que en el código incluido en el articulo, en la funcion alertaValue(), tiene erroneo el método, debiendo ser document.miFormulario.miCheck.value.

Aun asi, el articulo me parecio bueno.

Corregido, muchas gracias

Leonidas

23/4/2009
Gracias
Gracias tio, me a servido de muxa ayuda para un trabajo.

deyny

29/3/2010
sobre checkbox
hola. tengo una tabla resultado de una consulta php y mysql que se crea con una cantidad de columnas en dependencia del resultado del query. mi pregunta es: ¿como inserto un checkbox en uma columna de la tabla y que se repita tantas veces como columnas tenga la tabla. ?
necesito me ayuden soy principiante !!!!!!!!!!!11

Luis

11/5/2011
Acceso a componentes de los formularios
Me gustaría añadir, que la forma correcta para acceder a elementos de un formulario html respetando el doctype HTML 4.01 (transitional, no strict) es:
document.form["nombredelformulario"].componente.propiedad

Si no es especificado así, y el doctype esta colocado, el navegador no hará el codigo ya que no es estandar.

werli

04/9/2013
checkbox limite min y max
tengo este codigo
<script>
function checkSelect(elmId){
maxOptionsSelect = <?php echo "$pax";?>;
form = document.all("asientos");
inputs = form.getElementsByTagName("input");
count = 0;
for(i=0 ; i<inputs.length ; i++){
if(inputs[i].type=="checkbox" && inputs[i].checked==true){
count++;
}
}

if(count > maxOptionsSelect){
document.all(elmId).checked=false;
alert("Ud. puede seleccionar un maximo de " + maxOptionsSelect + " asientos");
return false;
}

return false;
}

</script>
----------------------
con esto seleciono un max de opciones pasadas con php, pero quiero tambien ponerle un min de opciones seleccionadas, y tambien debo poner otro grupo de checkbox, en el mismo formulario con un min y max de opciones,
Gracias por su ayuda.

Abraham

13/11/2013
AlertValue()
Buenas tardes,

Creo que la funcion alertValue() aun no se ha correigo, ya que siempre muestro el valor "on".

Saludos

Joaq

24/11/2014
error
creo que Abraham tiene razon, la funcion alertaValue siempre tira "on", a que se debe eso?

ERNESTO

17/5/2016
Solución al error alertaValue()
dentro de la función pongo esto:
if(document.miFormulario.miCheck1.checked){
var val_chk1 = "on";}
else{
var val_chk1 = "off";
}

funciona bien!