Select All checkbox by clicking a checkbox

Question

I looked for the solution here in the forum, however they did not work.

I want to select all the checkbox by clicking only 1 checkbox (selects all).

Follows my code:

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

Any idea how to fix this??

Edit: Dear, good afternoon, I realized the recommendations of this post, however I’m still with the same problem. Is there any other way I can go to achieve this goal?

Follows console print:

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

Answer 1

Just change that line:

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

Look here:

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

Answer 2

Follow below example with your own code, the same worked perfectly.

To complement your code I added a check on <tr> of <table>, this way if the user click on the respective line checkbox will be marked.

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

Answer 3

Your code is correct and functional. The problem is that you are loading the click event before PHP renders the table elements.

It is necessary that the event is loaded after the DOM is ready. To do so include the code within the event ready:

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

You can also put the script inline direct in the tag with the event onclick, then you don’t need the $(document).ready:

<input onclick="$('input:checkbox').prop('checked', this.checked);" type="checkbox" id="checkTodos">

Answer 4

Change in input checkbox:

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

In the Jquery:

$('#checkMaster').click(function(){
    $.each($('.check'),function(){
      if($(this).is(':checked')){
        $(this).prop('checked',false);
      }else{
        $(this).prop('checked',true);
      }
    });
});