Return all checkboxes unchecked via jquery

Question

I need to identify all checkboxes UNCHECKED to add a class by jquery to them, but whenever I submit the form with 1 or 2 checkbox selected, all other checkboxes deselected end up selected.

    //Valido meu form
    $('#enviar').on('click', function(e){
      e.preventDefault();
      
      //verifico se tem algum checkbox marcado e retorna o ID
      if($(".stck:checked").length > 0){
        var arr = [];
        $(".stck").prop("checked", true).each(function(item){
            arr.push($(this).attr("id"));
        });
        console.log(arr);
        return arr;
      } 
      
      //Se não, pego o ID dos desmarcados
      else { 
        var arr = [];
        $(".stck").prop("checked", false).each(function(item){
            arr.push($(this).attr("id"));
        });
        console.log(arr);
        return arr;
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="stck" name="sticker" id="A" value="A"  />
    <input type="checkbox" class="stck" name="sticker" id="B" value="B"  />
    <input type="checkbox" class="stck" name="sticker" id="C" value="C"  />
    <button id="enviar">enviar</button>

//---MEU JS  

I wish I could identify the non-selected checkboxes to inject a class into them.

Answer 1

Hello, the cleanest solution I got was this:

$('#enviar').on('click', function(e){
      e.preventDefault();
      
      var arr = [];
      $.each($("input[name='sticker']:checked"), function(){         
        arr.push($(this).val());
     }); 
      console.log(arr);      
      $("input:checkbox:not(:checked)").addClass('NaoSelecionado');
      
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="stck" name="sticker" id="A" value="A"  />
    <input type="checkbox" class="stck" name="sticker" id="B" value="B"  />
    <input type="checkbox" class="stck" name="sticker" id="C" value="C"  />
    <button id="enviar">enviar</button>

Answer 2

Hello,

I’d do it this way:

$('#enviar').on('click', function(e){

    e.preventDefault();

    // cria o array com os id's dos checkbox selecionados
    var array_id = $("input.stck:checkbox:checked").map(function(e){

        return $(this).val();

    }).get();

    // aplica a classe desejada para os checkbox que não foram selecionados
    $("input.stck:checkbox:not(:checked)").addClass('nome_da_classe');
});

Note 1: change the nome_da_classe to the desired class.

Obs2: in your code, to send multiple selected values you must use the input name as an array, like this: name="sticker[]"