Todos los programadores sabemos lo importante que es la validación de los datos de un formulario (Las validaciones nos permiten estar seguros de que estamos recibiendo los datos que deseamos de un usuario), en este artículo veremos como podemos hacer la validación de un CheckBox HTML haciendo uso de JavaScript, veamos:
¿CheckBox?
Los CheckBox o «Check» son componentes visuales que nos permiten interactuar con el usuario, es uno de los muchos controles que existen para armar formularios y son muy útiles cuando deseamos tener una lista de opciones de las cuales el usuario final escogerá una o más opciones, a diferencia del Radio Button en el cual el usuario escoge una opción entre varias.
Imagen del control CheckBox
Siguiendo con nuestro ejemplo básicamente lo que haremos es verificar si este se encuentra seleccionado o no.
Así que para ello vamos a declarar en nuestro código HTML 5 CheckBox así:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CheckBox</title> </head> <body> <input type="checkbox" id="ch1" value="1"> Naranja <br> <input type="checkbox" id="ch2" value="2"> Pera <br> <input type="checkbox" id="ch3" value="3"> Uva <br> <input type="checkbox" id="ch4" value="2"> Mango <br> <button>Validar</button> </body> </html>
Al guardar como archivo HTML el código anterior obtendremos:
Naranja
Pera
Uva
Mango
Ahora necesitamos que nuestro botón validar haga algo, en nuestro caso decirnos cuales cechk están seleccionados y cuales no, para ello nos apoyamos en JavaScript como lo dije al principio así:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CheckBox</title>
</head>
<body>
<input type="checkbox" id="ch1" value="1"> Naranja
<br>
<input type="checkbox" id="ch2" value="2"> Pera
<br>
<input type="checkbox" id="ch3" value="3"> Uva
<br>
<input type="checkbox" id="ch4" value="2"> Mango
<br>
<button onclick="Validar();">Validar</button>
<br>
<p id="mensaje"></p>
</body>
<script>
function Validar() {
var c1 = document.getElementById('ch1').checked;
var c2 = document.getElementById('ch2').checked;
var c3 = document.getElementById('ch3').checked;
var c4 = document.getElementById('ch4').checked;
document.getElementById('mensaje').innerHTML =
'CheckBox 1: '+c1+'\n'+'CheckBox 2: '+c2+'\n'+
'CheckBox 3: '+c3+'\n'+'CheckBox 4: '+c4;
}
</script>
</html>
Con la ejecución del código anterior muestro en el párrafo que he declarado un mensaje mostrando el estado de cada CheckBox así:
CheckBox 1: true CheckBox 2: true CheckBox 3: false CheckBox 4: false
Ahora bien ya sabemos que podemos obtener verdadero y falso cuando están seleccionados o no y con ello realizar las acciones que necesitemos.
Nota: también podemos extraer el valor que se encuentra en la etiqueta value de cada check, (Acción que normalmente es muy usada), así:
alert(document.getElementById('ch1').value);
Devolviendo un mensaje mostrando «1», por que es el valor que se encuentra en la etiqueta value.
Implementando un condicional
Como ya sabemos los condicionales nos permiten realizar o no determinadas acciones, por lo cual podemos usarlos teniendo en cuenta los CheckBox que el usuario selecciona o no, veamos:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CheckBox</title>
</head>
<body>
<input type="checkbox" id="ch1" value="1"> Naranja
<br>
<input type="checkbox" id="ch2" value="2"> Pera
<br>
<input type="checkbox" id="ch3" value="3"> Uva
<br>
<input type="checkbox" id="ch4" value="2"> Mango
<br>
<button onclick="Validar();">Validar</button>
<br>
<p id="mensaje"></p>
</body>
<script>
function Validar() {
var c1 = document.getElementById('ch1').checked;
var c2 = document.getElementById('ch2').checked;
var c3 = document.getElementById('ch3').checked;
var c4 = document.getElementById('ch4').checked;
var gustos = '';
if (c1==true) {
gustos += 'Te gustan las Naranjas <br>';
}else{
gustos += 'No te gustan las Naranjas <br>';
}
if (c2==true) {
gustos += 'Te gustan las Peras <br>';
}else{
gustos += 'No te gustan las Peras <br>';
}
if (c3==true) {
gustos += 'Te gustan las Uvas <br>';
}else{
gustos += 'No te gustan las Uvas <br>';
}
if (c4==true) {
gustos += 'Te gustan los Mangos <br>';
}else{
gustos += 'No te gustan los Mangos <br>';
}
document.getElementById('mensaje').innerHTML = gustos;
}
</script>
</html>
Como salida obtenemos el listado de frutas que al usuario le gustas y las que no así:
Naranja
Pera
Uva
Mango
Te gustan las Naranjas
No te gustan las Peras
Te gustan las Uvas
No te gustan los Mangos
Cabe decir que este es solo un ejemplo, en un proyecto real se realizan diversas funciones como pedir mas datos o cargar una imagen, mostrar cierta información etc.
Optimizando el código haciendo uso de JQuery
El código anterior aunque funciona a la perfección podemos hacer uso de JQuery para el manejo profesional y optimizado de JavaScript, veamos el equivalente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CheckBox</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" id="ch1" value="1"> Naranja
<br>
<input type="checkbox" id="ch2" value="2"> Pera
<br>
<input type="checkbox" id="ch3" value="3"> Uva
<br>
<input type="checkbox" id="ch4" value="2"> Mango
<br>
<button id="validar">Validar</button>
<br>
<p id="mensaje"></p>
</body>
<script>
$('#validar').click(function () {
var gustos = '';
if ($('#ch1')[0].checked==true) {
gustos += 'Te gustan las Naranjas <br>';
}else{
gustos += 'No te gustan las Naranjas <br>';
}
if ($('#ch2')[0].checked==true) {
gustos += 'Te gustan las Peras <br>';
}else{
gustos += 'No te gustan las Peras <br>';
}
if ($('#ch3')[0].checked==true) {
gustos += 'Te gustan las Uvas <br>';
}else{
gustos += 'No te gustan las Uvas <br>';
}
if ($('#ch4')[0].checked==true) {
gustos += 'Te gustan los Mangos <br>';
}else{
gustos += 'No te gustan los Mangos <br>';
}
$("#mensaje").append(gustos)
});
</script>
</html>
Como podemos ver con ayuda de los selectores de JQuery que nos permiten extraer y asignar valores al DOM se torna mucho más fácil y además logramos separar por completo el código HTML de JavaScript, lo cual nos ayudaría mucho en el mantenimiento de las páginas.
gracias por tu ejemplo, me resolvió mi problema, gracias.