validate if all chekboxes are not selected

Navigation
1

I have checkboxes and I want the user to select at least one before sending it to the controller. I found several ways to validate if it is selected but I do not know how to do the if, I am sleepy: (

How can I validate if all chekboxes are not selected? 

              <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>
    
asked by Carlos Enrique Gil Gil 06.02.2018 в 20:11
source

4 answers

1

Pure Javascript

This code verifies if all checkboxes in general are unchecked , by using 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>

Test with a listener, selected by class 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

In jQuery you could do something similar, using 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 />
    
answered by 06.02.2018 / 20:49
source
3

You can add to all your checkboxes a unique class for them, and then you can check them using a function that traverses all the input with these classes 

 //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
        }
    );

You must bear in mind that this function runs one by one all the inputs that are selected.

I hope it serves you. Greetings

    
answered by 06.02.2018 в 20:22
0

what you can do is go through all the check boxes by its name like this: 

$(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>
    
answered by 06.02.2018 в 20:53
0

Using 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
    
answered by 12.02.2018 в 22:38
Problems when storing strings of a class in an array Use polymorphism in objects of classes that implement the same interface?