Comprobar que un checkbox ha sido checkeado con jQuery
En muchos formularios nos vemos con la necesidad de añadir un campo de tipo checkbox para aceptar o no las condiciones de uso o privacidad, entre otros.
En este artículo vamos a ver como comprobar si un campo de tipo checkbox ha sido marcado o checkeado con jQuery mostrando una alerta con su estado.
Lo primero que deberemos hacer es incluir la librería jQuery y los scripts necesarios.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(){
if($('input[name=conditions]').is(':checked')){
alert('La politica de privacidad ha sido aceptada');
return true;
}
else{
alert('Debe aceptar la politica de privacidad');
return false;
}
});
});
</script>
En este caso, el documento está esperando a que sea pulsado el botón «enviar» para realizar la comprobación del estado del campo checkbox cuyo nombre es «conditons». Si está checkeado, mostramos una alerta de ok y retornamos true, en caso contrario, es decir, si no está checkeado, mostramos una alerta de no ok y retornamos false.
El código que va dentro de estas dos condiciones podría ser mucho mejor si por ejemplo declaramos un contenedor al lado del input checkbox y mostrar allí el mensaje en texto plano sin necesidad de mostrar una ventana de alerta.
En definitiva, hay muchas opciones que dependerán de los requerimientos o del programador.
En nuestro <body> tendremos el formulario donde tendremos el checkbox a checkear.
<form method="post"> <input type="checkbox" name="conditions" id="conditions" /><br/> <input type="submit" name="Enviar" id="button" value="Enviar" /> </form>
Autor
¿Buscas trabajo de programador?
5 respuestas a “Comprobar que un checkbox ha sido checkeado con jQuery”
Deja una respuesta
103 artículos que te podrían interesar
Ver más sobre
Hola Jose,
¿esto valdría para poner un checkbox para aceptar las políticas de privacidad en un prestashop en los registros de los clientes?. ¿Sabrías qué plantillas hay que modificar? ¿El script que pones al principio iría en la misma plantilla o en algún header?
Estoy intentando implementar algo así por cumplir todas las obligaciones legales (creo que en cada formulario que registre datos hay que hacer algo similar: contacto, newsletter, registro clientes, etc.)
Muchas gracias por adelantado
Hola buenas tardes,
Esta explicación sirve para un desarrollo a medida. En PrestaShop se deben considerar otros detalles técnicos.
Saludos
Hola José, tengo una duda muy existencial. Y es que necesito poner un checkbox en un formulario ya existente. Pero mi duda es que no sé donde poner el código de validación para que me lo reconozca. Te doy los códigos:
Aquí tengo el formulario:
—-
Cafelia Cafe | Contacto
#cajablancas {
background-color: #ffffff;
height: 550px;
margin-top: 5px;
}
p {
text-decoration: none;
color: inherit;
font-size: 0.8em;
padding: 0px 5px 0px 5px;
text-align: justify;
line-height: 13px;
margin: 0px;
}
h4 {
text-decoration: none;
color: #ee7731;
font-weight: bold;
font-size: 1.2em;
text-align: center;
padding-left: 5px;
padding-top: 10px;
}
h6 {
text-decoration: none;
font-weight: bold;
font-size: 1.0em;
text-align: center;
padding-left: 5px;
padding-right: 5px;
}
h5 {
text-decoration: none;
font-weight: bold;
font-size: 1.0em;
text-align: center;
padding-left: 5px;
padding-right: 5px;
padding-top: 6px;
border-top: 1px dotted #ff8833;
border-bottom: 1px dotted #ff8833;
ESP
ING
FR
INICIO
RESTAURACIÓN MÁQUINAS VENDING
RESTAURACIÓN MÁQUINAS ESPRESSO
IMPORTACIÓN EXCLUSIVA ESPRESSO
CÁMARAS MÓVILES REFRIGERADOS
SOLUCIONES INTEGRALES
NUESTRA EMPRESA
CONTACTO
Nombre*:
Empresa*:
Teléfono:
E-mail*:
Comentario:
Aceptar condiciones de uso
*Campos obligatorios
DONDE ESTAMOS
Polígono Industrial El Cristo
C/ Bodegueros, 1
13170 Miguelturra
Ciudad Real (España)
Tfno: +34 902 002 391
En cumplimiento de lo establecido en la LOPD, le informamos que sus datos serán tratados en nuestros ficheros, con la finalidad del mantenimiento y cumplimiento de la relación con nuestra entidad, incluyendo el envío de comunicaciones en el marco de la citada relación. Así mismo, sus datos serán cedidos en todos aquellos casos en que sea necesario para el desarrollo, cumplimiento y control de la relación con nuestra entidad o en los supuestos en que lo autorice una norma con rango de ley. En cumplimiento de la LOPD puede ejercitar sus derechos ARCO ante DESARROLLOS EMPRESARIALES ARMENGOT, S.L., con dirección en Calle Bodegueros nº 1, 13170 Miguelturra (Ciudad Real), adjuntando fotocopia del DNI.
CAFELIA ® – Desarrollos Empresariales Armengot, S.L. – 2013
$(function(){
$(‘#formulario’).validate({
submitHandler: function(form) {
$(form).ajaxSubmit({
url: ‘process.php’,
success: function() {
$(‘#textoContacto h3’).hide();
$(‘#formulario’).hide();
$(‘#textoContacto’).append(«Gracias por contactar con nosotros.»)
}
});
}
});
$(‘#button’).click(function(){
if($(‘input[name=conditions]’).is(‘:checked’)){
alert(‘La politica de privacidad ha sido aceptada’);
return true;
}
else{
alert(‘Debe aceptar la politica de privacidad’);
return false;
}
});
});
—–
Y aquí el php:
—-
<?php
/*
Script que gestiona el envío de un formulario por correo electrónico a la cuenta indicada.
*/
//Correo de destino; donde se enviará el correo.
$correoDestino = "info@cafeliacafe.com";
//Texto emisor; sólo lo leerá quien reciba el contenido.
$textoEmisor = "MIME-VERSION: 1.0rn";
$textoEmisor .= "Content-type: text/html; charset=UTF-8rn";
$textoEmisor .= "From: Formulario creado por DarioBF – http://www.dariobf.com";
/*
Recopilo los datos vía POST
Con strip_tags suprimo etiquetas HTML y php para evitar una posible inyección.
Como no gestiona base de datos no es necesario limpiar de inyección SQL.
*/
$nombre = strip_tags($_POST['name']);
$apellidos = strip_tags($_POST['surname']);
$empresa = strip_tags($_POST['company']);
$departamento = strip_tags($_POST['department']);
$telefono = strip_tags($_POST['phone']);
$correo = strip_tags($_POST['mail']);
$comentario = strip_tags($_POST['comment']);
$fecha = time();
$fechaFormateada = date("j/n/Y", $fecha);
//Si se pulsa el botón de enviar
//Formateo el asunto del correo
$asunto = "Contacto WEB_$nombre $apellidos; de $empresa";
//Formateo el cuerpo del correo
$cuerpo = "Enviado por: » . $nombre . «, » . $apellidos . » a las » . $fechaFormateada . «»;
$cuerpo .= «Empresa: » . $empresa . «, en el cargo/departamento de » . $departamento . «»;
$cuerpo .= «Teléfono de contacto: » . $telefono . «»;
$cuerpo .= «E-mail: » . $correo . «»;
$cuerpo .= «Comentario: » . $comentario;
// Envío el mensaje
mail( $correoDestino, $asunto, $cuerpo, $textoEmisor);
?>
Podrías ayudarme por favor?
Gracias¡
No lo puedo ver correctamente, pero a simple vista lo único que puedo preguntarte es si tu botón tieene id=»boton»? Nos podrías enseñar este ejemplo en linea o funcionamiento? Lo veremos más claro.
Saludos
Excelente, JUSTO LO QUE BUSCABA! genio!