Select all checkbox when clicking on a checkbox

Question

Select all checkbox when clicking on a checkbox

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (0 votes)

1

I tried the solution here in the forum, however it did not work.

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

Here is my code:

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><linkrel="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 ideas how to solve this?

Edit: Dear, good afternoon, I made the recommendations of this post, however I still have the same problem. Is there any further path I can take to achieve this goal?

Follow the console's printout:

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

php javascript html jquery

asked by anonymous 17.04.2018 / 20:17

4 answers

Classes with operations extending another class Error The multi-part identifier "..." could not be bound

score 1 · Answer 1

1

Just change this line:

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

Look there:

link

17.04.2018 / 20:25

score 1 · Answer 2

Here is an example with your own code, it worked perfectly.

To complement your code I've added a check in the <tr> of <table> , so if the user clicks the line the checkbox will be checked.

$(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><tableid="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>

score 1 · Answer 3

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

The event needs to be loaded after the DOM is ready. To do this include the code inside the event ready :

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

You can also put the inline script directly into the tag with the event onclick , there you do not need $(document).ready :

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

score 0 · Answer 4

Change in 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);
      }
    });
});