Skip to main content
adicionou 88 caracteres ao conteúdo
Fonte Link
Caique Romero
  • 7,2mil
  • 2
  • 24
  • 51

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(){ 
  alert//Para fins de depuração:
  console.log("Entrei aqui.");
 

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

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

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(){ 
  alert("Entrei aqui.");
 

  $("#checkMestre").click(function(){
    alert("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>

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>

adicionou 80 caracteres ao conteúdo
Fonte Link
Caique Romero
  • 7,2mil
  • 2
  • 24
  • 51

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(){ 
  alert("Entrei aqui.");


  $("#checkTodos""#checkMestre").click(function(){
    alert("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="checkTodos"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>

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(){ 

  $("#checkTodos").click(function(){
    $('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="checkTodos"/>
      </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>

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(){ 
  alert("Entrei aqui.");


  $("#checkMestre").click(function(){
    alert("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>

adicionou 67 caracteres ao conteúdo
Fonte Link
Caique Romero
  • 7,2mil
  • 2
  • 24
  • 51

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(){ 

  $("#checkTodos").click(function(){
    $('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="checkTodos"/>
      </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>

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.

$("#checkTodos").click(function(){
  $('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="checkTodos"/>
      </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>

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(){ 

  $("#checkTodos").click(function(){
    $('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="checkTodos"/>
      </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>

Fonte Link
Caique Romero
  • 7,2mil
  • 2
  • 24
  • 51
Carregando