Criando um checkbox que selecione todos os outros da página com Jquery

Criando um sistema de mensagens em um site tive a necessidade de criar um checkbox universal, ou o “Selecionar Todos”. É comum encontrá-lo em sistemas de email. Ele serve para que o usuário possa selecionar todas as mensagens apresentadas na tela antes de executar uma ação (Apagar, Marcar como lido, etc…), facilitando a utilização do sistema.

Para criar este checkbox com Jquery é bem simples. Antes de tudo é preciso baixar o jquery, se precisar pode baixar a versão 1.11.1 clicando aqui.

Para começar, criei uma função check, esta função é que irá verificar se devemos selecionar ou desselecionar todos (se é que esta palavra existe). No checkbox principal adicionei o onclick=”check();” para a função ser chamada quando for clicado. Dentro da função, verifico se ao clicar esse checkbox está selecionado ou não, e com um if direciono. Todos os check box possuem a mesmo classe, com isso consigo selecionar todos através do Jquery, o name e id são diferentes para cada checkbox, veja o código abaixo.

[php]
function check(){
if($(‘#msg_all’).attr(‘checked’) == ‘checked’){ // se o checkbox estiver selecionado quando clicado
$(‘.check’).attr(‘checked’, true); // seleciona toda a classe check
}else{ // se não estiver selecionado
$(‘.check’).attr(‘checked’, false);} // desmarca a classe check
}
[/php]

Ver exemplo

Qualquer dúvida é só mandar nos comentários, até a próxima!