1

tengo varos checkbox y quiero que el usuario forzosamente seleccione al menos uno antes de mandarlo al controlador encontre varias formas de validar si esta seleccionado pero no se como hacer el if, tengo sueño :(

¿como puedo validar si todos los chekbox no estan seleccionados?

              <div class="form-group col-md-6">
            <label>Evaluaciones</label><br>
            <label>
              <input type="checkbox" class="flat-red"  value="cleaver" name="evaluaciones[]"  checked id="cleaver">
              Cleaver
            </label>
            <label>
              <input type="checkbox" class="flat-red" value="personalidad" name="evaluaciones[]" checked id="personalidad">
              Personalidad
            </label>
            <label>
              <input type="checkbox" class="flat-red" value="excel" name="evaluaciones[]" checked id="excel">
              Excel
            </label>
            <label>
              <input type="checkbox" class="flat-red" value="ppt" name="evaluaciones[]" checked id="ppt">
              PPT
            </label>
            <label>
              <input type="checkbox" class="flat-red" value="word" name="evaluaciones[]" checked id="word">
              Word
            </label>
            <label>
              <input type="checkbox" class="flat-red" value="otra" name="evaluaciones[]"  id="otra">
              Otra
            </label>
          </div>




('.claseCheckBox:not(:checked)').each(
    function()
    {
        alert('ss');
    return false;
    }
);

              <div class="form-group col-md-6">
            <label>Evaluaciones</label><br>
            <label>
              <?php   
                $data = $perfil['evaluaciones']; 
                $evaluacionesCadena = explode(",", $data);?>
              <input type="checkbox" class="flat-red"  value="cleaver" name="evaluaciones[]"  <?php if(in_array('cleaver',$evaluacionesCadena )){ echo 'checked';} ?> id="cleaver" class="claseCheckBox">
              Cleaver
            </label>
            <label>
              <input type="checkbox" class="flat-red" value="personalidad" name="evaluaciones[]" <?php if(in_array('personalidad',$evaluacionesCadena)){ echo 'checked';} ?> id="personalidad" class="claseCheckBox">
              Personalidad
            </label>
            <label>
              <input type="checkbox" class="flat-red" value="excel" name="evaluaciones[]" <?php if(in_array('excel',$evaluacionesCadena )){ echo 'checked';} ?> id="excel" class="claseCheckBox">
              Excel
            </label>
            <label>
              <input type="checkbox" class="flat-red" value="ppt" name="evaluaciones[]" <?php if(in_array('ppt',$evaluacionesCadena )){ echo 'checked';} ?> id="ppt" class="claseCheckBox">
              PPT
            </label>
            <label>
              <input type="checkbox" class="flat-red" value="word" name="evaluaciones[]" <?php if(in_array('word',$evaluacionesCadena)){ echo 'checked';} ?> id="word" class="claseCheckBox">
              Word
            </label>
            <label>
              <input type="checkbox" class="flat-red" value="otra" name="evaluaciones[]" <?php if(in_array('otra',$evaluacionesCadena)){ echo 'checked';} ?> id="otra" class="claseCheckBox">
              Otra
            </label>
          </div>
4
  • solo debes comprobar si estan vacios simplemete? Commented el 6 feb. 2018 a las 19:13
  • si no estan seleccionados todos le mandare un mensaje de alerta pero eso lo hago yo Commented el 6 feb. 2018 a las 19:14
  • Creo que esto te puede servir. Hay dos posibilidades, una con Javascript puro y otra con jQuery.
    – A. Cedano
    Commented el 6 feb. 2018 a las 19:23
  • pero como valido no estan seleccionados todos? Commented el 6 feb. 2018 a las 19:26

4 respuestas 4

3

Puedes agregarles a todos tus checkbox una clase unica para ellos, y luego puedes comprobarlos mediante una función que recorra todos los input con estas clases

 //Comprobar si estan checkeados
$('.claseCheckBox:checked').each(
        function()
        {
            //Lo que quieres hacer
        }
    );

     //Comprobar si estan no checkeados
$('.claseCheckBox:not(:checked)').each(
        function()
        {
            //Lo que quieres hacer
        }
    );

Debes tener en cuenta que esta función recorre uno por uno todos los input que esten seleccionados.

Espero te sirva. Saludos

4
  • 1
    Creo que esta seria la respuesta adecuada
    – user28068
    Commented el 6 feb. 2018 a las 19:24
  • no, mi consulta es como validar si no estan seleccionados ese ech lo puedo hacer pero dentro como lo valido? Commented el 6 feb. 2018 a las 19:28
  • 1
    Necesitas saber si no estan checkeados.. ya actualizo mi respuesta Commented el 6 feb. 2018 a las 19:30
  • mira ya lo probre pero no me funciona lo agregue en mi pregunta tu respuesta para que lo puedas validar Commented el 6 feb. 2018 a las 19:43
1

Javascript puro

Este código verifica si todos los checkboxes en general están sin chequear, mediante el uso de querySelectorAll.

document.addEventListener("DOMContentLoaded", function(e) {

  var allChecksBoxes = document.querySelectorAll('input[type="checkbox"]');
  var chkVacio = [].filter.call(allChecksBoxes, function(el) {
    console.log(el.checked);
    return !el.checked
  });

  if (allChecksBoxes.length == chkVacio.length) {
    alert("Todos están sin chequear");
  }


});
<div class="form-group col-md-6">
  <label>Evaluaciones</label><br>
  <label>
              <input type="checkbox" class="flat-red"  value="cleaver" name="evaluaciones[]"  checked id="cleaver">
              Cleaver
            </label>
  <label>
              <input type="checkbox" class="flat-red" value="personalidad" name="evaluaciones[]" checked id="personalidad">
              Personalidad
            </label>
  <label>
              <input type="checkbox" class="flat-red" value="excel" name="evaluaciones[]" checked id="excel">
              Excel
            </label>
  <label>
              <input type="checkbox" class="flat-red" value="ppt" name="evaluaciones[]" checked id="ppt">
              PPT
            </label>
  <label>
              <input type="checkbox" class="flat-red" value="word" name="evaluaciones[]" checked id="word">
              Word
            </label>
  <label>
              <input type="checkbox" class="flat-red" value="otra" name="evaluaciones[]" id="otra">
              Otra
            </label>
</div>

Prueba con un listener, seleccionado por la clase flat-red:

document.addEventListener("DOMContentLoaded", function(e) {
  var allChecksBoxes = document.querySelectorAll("input[type='checkbox'].flat-red");
  allChecksBoxes.forEach(function(el) {
    el.addEventListener("click", function() {
      checkOnChange(allChecksBoxes)
    }, false);

  });
});

function checkOnChange(allChecksBoxes) {
  var chkVacio = [].filter.call(allChecksBoxes, function(el) {
    //console.log(el.checked);
    return !el.checked;
  });

  if (allChecksBoxes.length == chkVacio.length) {
    alert("Todos están sin chequear");
  }
}
<legend>Elija opción</legend>
<input type="checkbox" class="flat-red" value="1" checked />Opción 1: desmarca esta y verás la alerta<br />
<input type="checkbox" class="flat-red" value="2" />Opción 2<br />
<input type="checkbox" class="flat-red" value="3" />Opción 3<br />
<input type="checkbox" class="flat-red" value="4" />Opción 4<br />

jQuery

En jQuery podrías hacer algo parecido, usando length.

$(".flat-red").change(function() {
  var todosOn = $('.flat-red:checked').length;
  if (!todosOn) {
    alert('Todos sin chequear');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<legend>Elija opción</legend>
<input type="checkbox" class="flat-red" checked value="1" />Opción 1: desmárcala y verás la alerta<br />
<input type="checkbox" class="flat-red" value="2" />Opción 2<br />
<input type="checkbox" class="flat-red" value="3" />Opción 3<br />
<input type="checkbox" class="flat-red" value="4" />Opción 4<br />

0

lo que puedes hacer es recorrer todos los check box mediante su nombre así :

$(function(){
$("#BotonEnviar").click(function(){
var Evaluaciones= $("input[name='evaluaciones[]']:checked").length;
if (Evaluaciones== null || Evaluaciones== "" || Evaluaciones== undefined || Evaluaciones<= 0) {
   alert("Seleccione al menos una evaluación");
return false;
                }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-md-6">
            <label>Evaluaciones</label><br>
            <label>
              <input type="checkbox" class="flat-red"  value="cleaver" name="evaluaciones[]"  checked id="cleaver">
              Cleaver
            </label>
            <label>
              <input type="checkbox" class="flat-red" value="personalidad" name="evaluaciones[]" checked id="personalidad">
              Personalidad
            </label>
            <label>
              <input type="checkbox" class="flat-red" value="excel" name="evaluaciones[]" checked id="excel">
              Excel
            </label>
            <label>
              <input type="checkbox" class="flat-red" value="ppt" name="evaluaciones[]" checked id="ppt">
              PPT
            </label>
            <label>
              <input type="checkbox" class="flat-red" value="word" name="evaluaciones[]" checked id="word">
              Word
            </label>
            <label>
              <input type="checkbox" class="flat-red" value="otra" name="evaluaciones[]"  id="otra">
              Otra
            </label>
          </div>
          
          <button id="BotonEnviar">EnviarChecks</button>

0

Usando JQuery

$(".flat-red").change(function() {
   if ($('.flat-red:checked').length == 0) {
     alert('Ningun check marcado');
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<legend>Elije una opción</legend>
    <input type="checkbox" class="flat-red" checked value="1" />Opción 1<br />
    <input type="checkbox" class="flat-red" value="2" />Opción 2

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.