El control CHECKBOX es el cuadradito que puede tener dos estados (seleccionado o no seleccionado).

Para conocer su funcionamiento y ver como podemos acceder a su estado desde Javascript haremos un pequeña página.

Ejemplo: Confeccionar una página que muestre 4 lenguajes de programación que el usuario puede seleccionar si los conoce. Luego mostrar un mensaje indicando la cantidad de lenguajes que ha seleccionado el operador.

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

<script>
function contarSeleccionados()
{
  var cant=0;
  if (document.getElementById('checkbox1').checked)
  {
    cant++;
  }
  if (document.getElementById('checkbox2').checked)
  {
    cant++;
  }
  if (document.getElementById('checkbox3').checked)
  {
    cant++;
  }
  if (document.getElementById('checkbox4').checked)
  {
    cant++;
  }
  alert('Conoce ' + cant + ' lenguajes');
}
</script>

<form>
  <input type="checkbox" id="checkbox1">JavaScript
  <br>
  <input type="checkbox" id="checkbox2">PHP
  <br>
  <input type="checkbox" id="checkbox3">JSP
  <br>
  <input type="checkbox" id="checkbox4">VB.Net
  <br>
  <input type="button" value="Mostrar" onClick="contarSeleccionados()">
</form>
</body>
</html>

Cuando se presiona el botón se llama a la función Javascript contarSeleccionados(). En la misma verificamos uno a uno cada control checkbox accediendo a la propiedad checked del elemento que almacena true o false según esté o no seleccionado el control:

Disponemos un 'if' para cada checkbox:

  if (document.getElementById('checkbox1').checked)
  {
    cant++;
  }

Como la propiedad checked almacena un true o false podemos utilizar dicho valor directamente como valor de la condición en lugar de codificar:

  if (document.getElementById('checkbox1').checked==true)
  {
    cant++;
  }

Al contador 'cant' lo definimos e inicializamos en cero previo a los cuatro if. Mostramos luego el resultado final.

Retornar