0

Pessoal preciso marcar todos os checkbox de meu sistema utilizando javascript, porem quero marcar os checkbox através do id, como faço isso? Estou fazendo dessa forma, porém não está funcionando:

function marcarTodos(marcar,cont){
    var id   = document.getElementById(cont);


        if(marcar){
            document.getElementById(id).innerHTML = 'Desmarcar Todos';
        }else{
            document.getElementById(id).innerHTML = 'Marcar Todos';
        }

        var i = 0;
        for(i=0; i<id.length;i++){

                id[i].checked = marcar;
        }
}
2
  • Você está usando Jquery ou precisa ser Javascript puro ? 17/10/2016 às 12:11
  • Olá Lucas, estou usando js puro mas pode ser em ambos.
    – gemerich
    17/10/2016 às 12:13

2 Respostas 2

1

O segundo o W3C, o ID é um atributo único por página.

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

Lei mais em: HTML id Attribute

Portanto, você deverá utilizar o NOME do checkbox ou uma classe para utilizá-los.

Abaixo, um exemplo funcional utilizando o nome para marcar ou desmarcar os checkboxes.

function marcarTodos(nome, marcar){
    var id   = document.getElementsByName(nome);
    
    
        if(marcar){
            document.getElementById('acao').innerHTML = 'Clicou em marcar Todos';
        }else{
            document.getElementById('acao').innerHTML = 'Clicou em desmarcar Todos';
        }

        var i = 0;
        for(i=0; i<id.length;i++){
              
                id[i].checked = marcar;
        }
    }
  <input type="checkbox" name="veiculo" value="Bicicleta"> Bicicleta<br>
  <input type="checkbox" name="veiculo" value="Carro" > Carro<br>
<input type="checkbox" name="veiculo" value="Moto" > Moto<br>

<br/>
<button onclick="javascript:marcarTodos('veiculo', true);">Marcar todos</button>
<button onclick="javascript:marcarTodos('veiculo', false);">Desmarcar todos</button>

<div id="acao"></div>

1

Utilizando Jquery você pode buscar todos os checkbox dentro de um determinado elemento (ou da página inteira) e checkar todos eles:

<html>

<div id="teste" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
<button title="Marcar" id="marcar"> Marcar </button>
   <script>
    var marcado = false;
    $('#marcar').on("click", marcaChecks);

    function marcaChecks(){
    $('#teste').find('input[type=checkbox]').each(function(indice,elemento){
    elemento.checked = !marcado;
    });
    marcado = !marcado;
    }
</script>
</html>

Utilizei uma variável global para guardar se os checks deverão ser marcados ou desmarcados, se você inverter um a um como sugere a questão, no comentário você inverteria todos os checks.

Link funcionando.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .