O Danilo fez ontem um post no blog dele sobre como implementar uma solução com jQuery para fazer aquele famoso "marcar todos" onde um checkbox, ao ser clicado, marca ou desmarca todos os checkboxes d eum certo grupo. Bem bacana!
Ai, resolvi aproveitar o gancho e mostrar como pode ser feito isso sem o uso de qualquer biblioteca javascript – ou seja, na mão. O código, claro, é mais extenso do que se tivesse sido feito com alguma biblioteca, mas acho que vale no mínimo como referência!
Segue, abaixo, a implementação com os devidos comentários!
<html>
<head>
<title>Manipulação de checkboxes</title>
<script type="text/javascript">
window.onload = function() {
//listener para click do checkbox que marca/desmarca todos
document.getElementById("checkAll").onclick = function() {
var form = document.getElementById("myForm"); //formulário
//percorre todos os checkboxes e seta se está ou não checado, conforme o valor do check mandatório
var checks = form.getElementsByTagName("input");
for(var i=0; i<checks.length; i++) {
var chk = checks[i];
if(chk.name == "dados[]")
chk.checked = this.checked;
}
}
}
</script>
</head>
<body>
<h1>Meu form</h1>
<form action="#" id="myForm">
<fieldset>
<input type="checkbox" name="dados[]" />check 1<br />
<input type="checkbox" name="dados[]" />check 2<br />
<input type="checkbox" name="dados[]" />check 3<br />
<input type="checkbox" name="dados[]" />check 4<br />
<input type="checkbox" name="dados[]" />check 5<br />
</fieldset>
marcar todos: <input type="checkbox" id="checkAll" />
</form>
</body>
</html>