Sabem quando temos uma lista bem grande de inputs do tipo checkbox, onde o usuário terá de selecionar quais são as opções desejadas?
Bom, agora imaginem que esta lista é um pouco maior. Fica extremamente desagradável ter que marcar ou desmarcar um a um.
Uma boa prática é colocar uma opção para o usuário marcar ou desmarcar todos.
Isso é uma tarefa bem fácil de se implementar em Javascript “puro”, mas o jQuery como sempre nos da aquela ajuda.
Solução:
// Atribuímos a variavel ipts todos os inputs encontrados dentro do elemento "#checkboxes"
var ipts = $("#checkboxes").find("input");
function checkAll() {
// CheckBox que ao ser clicado marca ou desmarca todos elementos
var check = document.getElementById("checkboxCheckAll");
// Testamos o CheckBox para ver se devemos marcar ou desmarcar
check.checked ?
jQuery.each(ipts, function () {
// Se esta "checado" então marcamos todos elementos como checked=true
this.checked = true;
}) :
jQuery.each(ipts, function () {
// Se não esta "checado" então marcamos todos elementos como checked=false
this.checked = false;
});
}
Simples e rápido.
Testei com mais de 50 elementos e a rotina não ultrapassou 2 milisegundos.