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.
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.
No hay comentarios.:
Publicar un comentario