Listado completo de tutoriales

Control CHECKBOX

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>

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

    <script>
        function contarSeleccionados() {
            let 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>

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