How to get input checkbox array value with jquery

Question

I’m not able to verify if at least one checkbox was checked before giving Ubmit in the form.

I saw that you have some questions similar to mine, but none of the solutions worked out for me

I used the following code and it’s not working:

$("#funcoes_cursos").submit(function(){
            var cursos = $("#funcoes_cursos input[name='cursos[]']").val();
            if(cursos == "" || cursos === undefined){
                alert('Selecione um ou mais cursos para deletar');
                return false;
            }else {
                if( !(confirm("Ao deletar um curso, todos os dados relacionados a ele também serão deletados. Deseja realmente deletar o curso?")) ) {
                    return false;
                }
            }
        });

Inputs are in format:

<input type="checkbox" name="cursos[]" value="">

My idea is that before sending the form to page that deletes the selected courses, it checks if at least one course is selected. But the way it is, it doesn’t take the input value.

Answer 1

The problem is that $("#funcoes_cursos input[name='cursos[]']") returns a list(array) of courses and not only one, so the .val() takes only the value of the first. In addition it is necessary to see which are checked. Accounting can be done with the each(), passing through each element and counting those who are checked:

var cursos = $("#funcoes_cursos input[name='cursos[]']"); //apanhar todos

var checkados = 0; //iniciar a contagem
cursos.each(function() {
    if ($(this).is(':checked')) { //se está marcado conta mais 1
        checkados++; 
    }
});

Then it is only necessary to check whether the count is greater than 0. Integrating with your code would look like this:

$("#funcoes_cursos").submit(function() {
  var cursos = $("#funcoes_cursos input[name='cursos[]']");

  var checkados = 0;
  cursos.each(function() {
    if ($(this).is(':checked')) {
      checkados++;
    }
  });

  if (checkados == 0) {
    alert('Selecione um ou mais cursos para deletar');
    return false;
  } else {
    if (!(confirm("Ao deletar um curso, todos os dados relacionados a ele também serão deletados. Deseja realmente deletar o curso?"))) {
      return false;
    }
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="funcoes_cursos">
  <input type="checkbox" name="cursos[]" value="curso1">
  <input type="checkbox" name="cursos[]" value="curso2">
  <input type="checkbox" name="cursos[]" value="curso3">

  <input type="submit">
</form>

An even simpler solution is to use the pseudo selector :checked directly in the search of the elements. This will cause you to only get the elements that are checked and so it remains only to know if it has obtained some testing the length(quantity) of that obtained.

Example:

$("#funcoes_cursos").submit(function() {
  //agora buscar somente os checkeds, utilizando :checked no seletor
  var cursos = $("#funcoes_cursos input[name='cursos[]']:checked");
 
  if (cursos.length == 0) {
    alert('Selecione um ou mais cursos para deletar');
    return false;
  } else {
    if (!(confirm("Ao deletar um curso, todos os dados relacionados a ele também serão deletados. Deseja realmente deletar o curso?"))) {
      return false;
    }
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="funcoes_cursos">
  <input type="checkbox" name="cursos[]" value="curso1">
  <input type="checkbox" name="cursos[]" value="curso2">
  <input type="checkbox" name="cursos[]" value="curso3">

  <input type="submit">
</form>