Validar Checkbox con JavaScript y jQuery

Índice

Código completo Validar Checkbox con JavaScript
¿Cómo saber si un checkbox está seleccionado en jQuery?

Validar checkbox con JavaScript es sencillo. Te enseñare con estos 2 ejemplos para validar o detectar si un checkbox esta seleccionado.

1. Ejemplo básico para saber si un checkbox esta seleccionado:

var isChecked = document.getElementById('test').checked;
if(isChecked){
  alert('checkbox esta seleccionado');
}

2. Y si deseas detectar su estado cada vez que pincha sobre el:

var checkbox = document.getElementById('test');
checkbox.addEventListener("change", validaCheckbox, false);
  
function validaCheckbox(){
  var checked = checkbox.checked;
  if(checked){
    alert('checkbox esta seleccionado');
  }
}

Código completo Validar Checkbox con JavaScript

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Validar Checkbox</title>
    <style>
        body{padding: 50px;text-align: center;}
    </style>
</head>
<body>
    <label for="test">
    <input type="checkbox" name="test" id="test">
        Pincha aquí
    </label>
 
    <script>
        var checkbox = document.getElementById('test');
        checkbox.addEventListener("change", validaCheckbox, false);
 
        function validaCheckbox(){
        var checked = checkbox.checked;
        if(checked){
            alert('checkbox esta seleccionado');
        }
        }
    </script>
</body>
</html>

Validar Checkbox JavaScript: ( VER DEMO )

¿Cómo saber si un checkbox está seleccionado en jQuery?

En jQuery, puedes usar el método .is(":checked"). Por ejemplo, si tienes un checkbox con un ID de "miCheckbox", puedes comprobar si está seleccionado de la siguiente manera:

if ($("#miCheckbox").is(":checked")) {
  // el checkbox está seleccionado
} else {
  // el checkbox no está seleccionado
}

Aquí tienes un ejemplo de cómo comprobar si un checkbox está seleccionado en jQuery:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#miBoton").click(function(){
    if ($("#miCheckbox").is(":checked")) {
      alert("El checkbox está seleccionado");
    } else {
      alert("El checkbox no está seleccionado");
    }
  });
});
</script>
</head>
<body>

<input type="checkbox" id="miCheckbox" checked>
<button id="miBoton">Comprobar si el checkbox está seleccionado</button>

</body>
</html>

Deja una respuesta Cancelar la respuesta