Se você gosta de poupar tempo com códigos e simplificá-los ao máximo, você encontrou o post certo.
Veja como é fácil marcar e desmarcar todas as checkekboxes com jquery.

Bom vamos começar analisando o modo convencional de marcar checkboxs com js:

function selecionar_tudo(){
for (i=0;i<document.f1.elements.length;i++)
if(document.f1.elements[i].type == "checkbox")
document.f1.elements[i].checked=1
}

E isso é só para marcar, pois ainda temas que criar uma função quase igaul somente trocando o valor do “checked” para 0 para termos a função para desmarcar as checekboxes.
Depois dessa trabalheira toda ainda temos que verificar se as checks estão marcadas ou não para sabermos qual das duas funções usar. Muito complicado.

Agora chegou a hora de tornar tudo mais simples. Veja o código jquery abaixo:

function Marcar(){
$("input[type=checkbox]").each(function(){this.checked = true;});
)};

function Desmarcar(){
$("input[type=checkbox]").each(function(){this.checked = false;});
});

Veja como ficou simples agora. Temos as funções com pouquíssimas linhas de código.

Mas agora para colocarmos as duas funções num mesmo botão, podemos usar o evento Toogle do jquery. Veja abaixo como fica:

$(document).ready(function() {
$(".marcar-todos").toggle(function(){
$("input[type=checkbox]").each(function(){this.checked = true;});
},function(){
$("input[type=checkbox]").each(function(){this.checked = false;});
});
});

Com o evento Toogle podemos colocar diferentes funções associadas a um mesmo acontecimente. No caso acima quando clicarmos no botao de classe “marcar todos”, ele marcará todas as checkboxes, e se clicarmos novamente, ele desmarcará.

^{Vejam a demostração aqui.}

Não esqueçam de pegar o plugin Jquery.

javascript, outros checkbox, framework, jquery, js, programação