2

Procurei a solução aqui no fórum, entretanto as mesmas não funcionaram.

Quero selecionar todos os checkbox ao clicar em apenas 1 checkbox (seleciona todos).

Segue meu código:

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


    <link rel="stylesheet" href="css/app.min.css">

    <meta name="description" content="Violate Responsive Admin Template">
    <meta name="keywords" content="Super Admin, Admin, Template, Bootstrap">

     <script>
        $(document).ready(function(){ 
          //Para fins de depuração:
          console.log("Entrei aqui.");
            $("#checkMaster").click(function(){
            //Para fins de depuração:
            console.log("Checkbox mestre foi clicado!");    
                $('input:checkbox').not(this).prop('checked', this.checked);
            });
            console.log("saiu aqui.");
        });

    </script>

<!--    <meta http-equiv="refresh" content="5" /> -->
  </head>  

Warning

             <div class="card">
                <div class="card-body">


                    <div class="table-responsive">
                        <table id="data-table" class="table">
                            <thead>
                                <tr>
                                    <th>Nome</th>
                                    <th>Telefone</th>
                                    <th>Numero de tentativas</th>
                                    <th>Ultima Tentativa</th>
                                    <th>Zerar Tentativas?</th>

                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td><p><input type="checkbox" id="checkMaster" name="checkTodos"> Selecionar Todos</p></td>

                                </tr>
                                <?php 

                                    $query = sprintf("select * from ivr_contatos, ivr_campanha where ivr_contatos.campanha = ivr_campanha.id and ivr_contatos.status = 0 and tentativas >= 5" );
                                    $result = Populator::ConsultaDB($query);

                                    while ($resultado = pg_fetch_array($result) ) {
                                        $nome = $resultado['nome'];
                                        $telefone = $resultado['telefone'];
                                        $tentativa = $resultado['tentativas'];
                                        $lastAttempt = $resultado['atualizado'];
                                        $codigo = $resultado['codigo'];

                               echo '         

                                <tr>
                                    <td>'.$nome.'</td>
                                    <td>'.$telefone.'</td>
                                    <td>'.$tentativa.'</td>
                                    <td>'.substr($lastAttempt,0,19).'</td>
                                    <td><input type="checkbox" value='.$codigo.' name="check[]"/></td>
                                </tr>
                                ';
                                    }
                                ?>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <input type="submit" value="Resubmit" class="btn btn-sm m-r-5" />

        </form>

Alguma ideia de como resolver isso??

Edit: Caros, boa tarde, realizei as recomendações deste post, entretanto ainda estou com o mesmo problema. Há mais algum caminho que eu possa seguir para atingir este objetivo?

Segue print do console: inserir a descrição da imagem aqui

$('input:checkbox').not(this).prop('checked', this.checked);
init(16) [input#ckball, input#ckbCod.check, input#ckbCod.check, input#ckbCod.check, input#ckbCod.check, input#ckbCod.check, input#ckbCod.check, input#ckbCod.check, input#ckbCod.check, input#ckbCod.check, input#ckbCod.check, input#ckbCod.check, input#ckbCod.check, input#ckbCod.check, input#ckbCod.check, input#ckbCod.check, prevObject: init(16), context: document]
24
  • 1
    O código me parece ok! O que não está funcionando?
    – Sam
    Commented 17/04/2018 às 18:24
  • Quando clico no checkbox selecionar todos, os outros não são marcados como checked Commented 17/04/2018 às 18:41
  • O seu código está funcionando, veja aqui jsfiddle.net/Lwamk47c
    – Sam
    Commented 17/04/2018 às 18:44
  • Tenta colocar o código dentro de $(document).ready(function(){ código aqui });
    – Sam
    Commented 17/04/2018 às 18:48
  • 1
    Então a única saída é vc mostrar o código todo, apenas da parte que envolve o javascript e a tabela.
    – Sam
    Commented 17/04/2018 às 19:13

4 Respostas 4

1

Só mudar essa linha:

$('input:checkbox').prop('checked', $(this).prop('checked'));

Olha aí:

https://jsfiddle.net/xpvt214o/145709/

1
  • Ainda persiste o erro. por algum motivo, ele não seleciona o resto dos checkbox Commented 17/04/2018 às 18:41
1

Segue abaixo exemplo com o seu próprio código, o mesmo funcionou perfeitamente.

Para complementar seu código adicionei uma verificação nas <tr> da <table>, dessa forma caso o usuário clique na linha o respectivo checkbox será marcado.

$(document).ready(function(){ 
  //Para fins de depuração:
  console.log("Entrei aqui.");

  $("#checkMestre").click(function(){

    //Para fins de depuração:
    console.log("Checkbox mestre foi clicado!");
    
    $('input:checkbox').not(this).prop('checked', this.checked);
  });

  //Função para marcar o checkbox ao clicar na linha:
  $("#exemplo tr").on("click", function(){
    $(this).children().children()[0].click();
  });

  //Impeço a propagação para não dar conflito com o click na tr.
  $("input:checkbox").on("click", function(e){
    e.stopPropagation();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="exemplo">
  <thead>
    <tr>
      <th>
        <input type="checkbox" id="checkMestre"/>
      </th>
      <th>
        Nome
      </th>
      <th>
        Nível
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" id="idUsuario" value="1"/>
      </td>      
      <td>
        Caique
      </td>
      <td>
        Prata
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="idUsuario" value="2"/>
      </td>      
      <td>
        Natane
      </td>
      <td>
        Ouro
      </td>
    </tr>
  </tbody>
</table>

5
  • Obrigado Caique, entretanto ainda não rolou.. ainda continuo selecionando só 1 checkbox invés de todos... Commented 17/04/2018 às 18:52
  • O problema persistiu, estou achando que pode ser alguma coisa do bootstrap Commented 17/04/2018 às 19:29
  • no head só estão as bibliotecas e o script jquery... Commented 17/04/2018 às 19:47
  • Caique, foi minha primeira ideia, alterei, mas não surtiu efeito. Commented 17/04/2018 às 19:55
  • Fiz a alteração, mas não chamou nenhum alert Commented 17/04/2018 às 19:58
1

Seu código está correto e funcional. O problema é que você está carregando o evento de clique antes do PHP renderizar os elementos da tabela.

É necessário que o evento seja carregado após o DOM estar pronto. Para isso inclua o código dentro do evento ready:

$(document).ready(function(){
   $("#checkTodos").click(function(){
      $('input:checkbox').prop('checked', this.checked);
   });
});

Você também pode colocar o script inline direto na tag com o evento onclick, aí não precisa do $(document).ready:

<input onclick="$('input:checkbox').prop('checked', this.checked);" type="checkbox" id="checkTodos">
24
  • Fiz a inclusão do $(document).ready(function(){} conforme informado, entretanto o problema persiste. Sera que tem alguma coisa a ver por usar o bootstrap estar escondendo as outras checkbox checadas? Commented 17/04/2018 às 19:34
  • coloca um alert("ok"); dentro do evento do clique para ver se ele aparece.
    – Sam
    Commented 17/04/2018 às 19:48
  • Não apareceu, então não esta havendo a conexão do checkbox com o jquery Commented 17/04/2018 às 19:50
  • Isso mesmo, mas deixa o document ready como está
    – Sam
    Commented 17/04/2018 às 19:50
  • Altera o evento para isso: $(document).on("click", "#checkTodos", function(){
    – Sam
    Commented 17/04/2018 às 19:52
0

Alteração no input checkbox:

<td><input type="checkbox" value='.$codigo.' name="check[]" class="check"/></td>

No Jquery:

$('#checkMaster').click(function(){
    $.each($('.check'),function(){
      if($(this).is(':checked')){
        $(this).prop('checked',false);
      }else{
        $(this).prop('checked',true);
      }
    });
});
1
  • Opa, irei testar esse jeito Commented 11/05/2018 às 12:52

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 .