Olá pessoal, tudo bom com vocês?

Hoje trarei uma solução simples porém para quem está começando é uma “mão na roda”, que ainda é bastante utilizada.
Sem mais delongas, vamos aprender a Como fazer um botão para marcar/desmarcar vários checkboxs com JavaScript.

Primeiro de tudo, teremos nosso HTML:

/**
 * html dos checkbox
 */
 
<!DOCTYPE html>
<html>
<head>
    <title>Marcando/desmarcando os checkbox</title>
</head>
<body>
    <input type="checkbox" name="chk[]" value="1">
    <label>Primeiro</label>
    <br>
    <input type="checkbox" name="chk[]" value="2">
    <label>Segundo</label>
    <br>
    <input type="checkbox" name="chk[]" value="3">
    <label>Terceiro</label>
    <br>
    <input type="checkbox" name="chk[]" value="4">
    <label>Quarto</label>
    <br>
    <a href="#!" id="botao" onclick="marcarTodos()">Marcar Todos</a>
    <!--  nome em vetor (chk[]) -->
    
    <!-- chame o arquivo func.js pelo script src="func.js" -->
</body>
</html>

Como podem ver, o atributo name dos checkbox está “chk[]”, isto significa que para o JavaScript, será como um vetor de elementos onde o chk[0] na verdade é o primeiro checkbox e assim sucessivamente…

Vamos agora ver como o arquivo func.js é:

//função para marcar e desmarcar todos os checkbox e pego eles com nome em vetor (chk[])
function marcarTodos(){
    var itens = document.getElementsByName('chk[]');

    if(marcar){
        document.getElementById('botao').innerHTML = 'Desmarcar Todos';
        var i = 0;
        for(i=0; i<itens.length;i++){
            itens[i].checked = marcar;
        }
        marcar = false;
    }else{
        document.getElementById('botao').innerHTML = 'Marcar Todos';
        var i = 0;
        for(i=0; i<itens.length;i++){
            itens[i].checked = marcar;
        }
        marcar = true;
    }


}
marcar = true;

Percebam que eu declaro a variável marcar como true por fora da função que chama no botão.

Neste caso eu assumo que todos os checkbox, ao carregar a página, não estão marcados, por isso o marcar recebe true, para que no primeiro click do botão ele possa verificar se é true e então marca todos, após marcar todos os checkbox, a variável marcar recebe false para que na pŕoxima verificação ele desmarque.

Legal né? Caso tenha sugestões de melhorias no algoritmo, dicas e críticas, serão muito bem vindas.

Obrigado pela visita.

 

Autor: Guilherme Pedrazzi