Olá, tudo bem?
Então, montei um código que seleciona e desseleciona conforme o que precisa, porém,
por algum motivo em algum após desselecionar ele "deixa de selecionar novamente",
contudo isso só ocorre visualmente, pois analisando pelo inspetor de elementos do navegador
o efeito continua acontece, porém, só não é mostrado... estranho...
Se alguém souber o porque dá um toque.
Bom, vamos lá ao código
Código Html:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script src="jquery-2.2.0.min.js" defer></script> <script src="function-selecionar.js" defer></script> </head> <body> <form> <input type="checkbox" name="marcar" value="marcar" /> Marcar todos<br /><br /> <input type="checkbox" name="vcheck01" value="Checkbox 01" /> Checkbox 01<br /> <input type="checkbox" name="vcheck02" value="Checkbox 02" /> Checkbox 02<br /> <input type="checkbox" name="vcheck03" value="Checkbox 03" /> Checkbox 03<br /> <input type="checkbox" name="vcheck04" value="Checkbox 04" /> Checkbox 04<br /> </form> </body> </html>
Código Javascript arquivo function-selecionar.js:
$("form input[name=marcar]").change(function() { if( this.checked ) { $(":checkbox[name^=v]").attr("checked","checked"); } else { $(":checkbox[name^=v]").removeAttr("checked"); } });
Espero ter ajudado, qualquer dúvida é só perguntar.
ps: separei em dois arquivos, pois a recomendação da w3c é que cada linguagem tenha o seu arquivo exclusivo.