0

Preciso identificar todos checkboxes DESMARCADOS para adicionar uma classe por jquery neles, mas sempre que submito o formulário com 1 ou 2 checkbox selecionado, todos outros checkboxes desmarcados acabam selecionados.

    //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  

Queria poder identificar os checkboxes não selecionados para injetar uma classe neles.

2
  • Qual é o código onde estás a tentar adicionar a classe?
    – Sergio
    Commented 5/07/2019 às 7:57
  • Você tá marcando todos os outros checkbox quando executa $(".stck").prop("checked", true) dentro do if. Por isso ele tá marcando todas as caixas quando você seleciona uma ou mais opções. Dê uma olhada no código que postei abaixo, acredito que vá resolver o seu problema. Commented 5/07/2019 às 10:28

2 Respostas 2

1

Olá, a solução mais enxuta que cheguei foi essa:

$('#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>

2
  • Obrigado pelo tempo disponibilizado Leonardo, me ajudou muito!!
    – Soundstorm
    Commented 7/07/2019 às 16:19
  • Imagina @Soundstorm; retribuia ajudando também a comunidade. Abs e bons estudos! Tamo junto Commented 8/07/2019 às 11:20
1

Olá,

Eu faria isso da seguinte forma:

$('#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');
});

Obs1: alterar o nome_da_classe para a classe desejada.

Obs2: no seu código, para funcionar o envio de múltiplos valores selecionados você deve usar o nome do input como um array, assim: name="sticker[]"

1
  • 1
    Muito obrigado pelo tempo disponibilizado Alexandre, me ajudou muito!! Suas observações foram muito importantes para me ajudar a melhorar meu código, iniciei meus estudos a pouco mais de 1 mês em Js e Jquery, ainda preciso melhorar muito.
    – Soundstorm
    Commented 7/07/2019 às 16:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .