Marcando todos os checkboxes com JQuery

Bom galera para esse post resolvi fazer uma coisa trivial para todas as páginas que tenham um datagrid ou um carrinho de compras que é marcar e desmarcar todos os checkboxes de uma determinada lista, e fazer isso com o framework JQuery é muito fácil!

Demo Download do código fonte

Bom vamos ao código:

 <table>
 <thead>  
    <tr>  
      <th><input type="checkbox" id="chkAll" name="chkAll" value="1" /></th>  
      <th>Coluna 02</th>  
      <th>Coluna 02</th>  
    </tr>  
 </thead>  
 <tbody>  
    <tr>  
      <td><input type="checkbox" class="check" name="chk01" value="1"/></td>  
      <td>(...)</td>  
      <td>(...)</td>  
    </tr>  
    <tr>  
      <td><input type="checkbox" class="check" name="chk02" value="2"/></td>  
      <td>(...)</td>  
      <td>(...)</td>  
    </tr>  
    <tr>  
      <td><input type="checkbox" class="check" name="chk03" value="3"/></td>  
      <td>(...)</td>  
      <td>(...)</td>  
    </tr>  
    <tr>  
      <td><input type="checkbox" class="check" name="chk04" value="4"/></td>  
      <td>(...)</td>  
      <td>(...)</td>  
    </tr>  
    <tr>  
      <td><input type="checkbox" class="check" name="chk05" value="5"/></td>  
      <td>(...)</td>  
      <td>(...)</td>  
    </tr>  
 </tbody>  
 <tfoot>  
    <tr>  
      <td colspan="2">TOTAL</td>  
      <td>R$ 500,00</td>  
    </tr>  
 </tfoot>  
 </table>  

Um pouco de css

table {border:1px solid #ccc;width:500px;}
table td, table th {border-top:1px solid #ccc;border-left:1px solid #ccc;padding:5px;}
table th {background: #e4e4e4;}
table tr:first-child th {border-top:0;}
table tbody tr td:first-child, table tr th:first-child{border-left:0;text-align:center;}
table tfoot {background:#f2f2f2;}
table tfoot td {border:0; text-align:right; font-weight:bold}

Javascript

$(function(){
     $("#chkAll").change(function(){
          $(".check").attr('checked', $(this).is(':checked') ? true : false);
     });
});

E aí o que você me diz? JQuery é ou não bem legal? Preste atenção na linha 3 do código javascript, nela “pegamos” todos os checkboxes e adicionamos o atributo checked com valor variável de acordo com valor do atributo checked do checkbox principal (#chkAll) . Até a próxima!

Tags: checkbox, Javascript, jquery