Novedades ES6

Control CHECKBOX con Javascript

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.

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.