InfoTic: Javascript Parte XXVII

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.

<html>
<head>
</head>
<body>

<script type="text/javascript"> 
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 finalmente el resultado final.

InfoTic

jueves, 2 de marzo de 2017

Javascript Parte XXVII

No hay comentarios.:

Publicar un comentario