How to get value from input checkbox array with jquery

Question

How to get value from input checkbox array with jquery

Navigation

#1 by (3 votes)

0

I'm not able to check if at least one checkbox was checked before submitting to form.

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

I used the following code and it is 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;
                }
            }
        });

The inputs are in the format:

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

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

javascript html jquery

asked by anonymous 05.08.2017 / 16:06

1 answer

How to break line automatically in a text component? Change style - Bootstrap [closed]

score 3 · Accepted Answer

The problem is that $("#funcoes_cursos input[name='cursos[]']") returns a list (array) of courses and not one, so .val() only takes the value of the first one. In addition it is necessary to see which are checked . The counting can be done with each() , passing in each element and counting those that 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 you just need to check if 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><formid="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 :checked pseudo selector directly in the search of the elements. This will cause you to only get the elements that are checked and so it remains to know if you got any testing the length (quantity) of what you got.

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><formid="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>