3

Coloquei uma function para marcar todas as checkbox, em um script que o Isac desenvolveu em uma dúvida anterior, mas ele não funciona em conjunto com a function, somente em um html estático.

function all_check(marcar) {
    var itens = document.getElementsByTagName('checkbox');

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

    var i = 0;
    for (i = 0; i < itens.length; i++) {
        itens[i].checked = marcar;
    }

}

var json = [{
    nome: 'Pedro',
    data: '13/09/2017'
  },
  {
    nome: 'Lucas',
    data: '13/09/2017'
  },
]

var mydiv = document.getElementById("lista");
mydiv.innerHTML = "";
var ul = document.createElement("ul");
mydiv.appendChild(ul);

var escolhidas = [];
json.forEach(function(obj) {
  var li = document.createElement("li");
  ul.appendChild(li);
  Object.keys(obj).forEach(function(chave) {
    var div = document.createElement("div");
    div.classList.add(chave);
    div.textContent = obj[chave];
    li.appendChild(div);
  });
  var checkbox = document.createElement("input");
  checkbox.type = 'checkbox';
  checkbox.name = 'checkbox';
  checkbox.addEventListener('change', function() {
    this.closest('li').classList.toggle('selecionado', this.checked);
    if (this.checked) escolhidas.push(obj);
    else escolhidas = escolhidas.filter(function(el) {
      return el != obj;
    });
    console.log(escolhidas);
  });
  li.appendChild(checkbox);
});
.selecionado {
  background-color: #efe;
}
<input type="checkbox" onclick="all_check(this.checked);">
                <span id="acao">Marcar</span> <br>

<div id="lista">
</div>

6
  • Porque não posso agradecer quando no meu post ?
    – Stan
    Commented 13/10/2017 às 9:48
  • Agradecer uma pessoa é o minimo para se fazer, não é bla bla, são algumas palavras só
    – Stan
    Commented 13/10/2017 às 10:03
  • Então leia esse link para entender porque removemos saudações e agradecimentos aqui
    – user28595
    Commented 13/10/2017 às 10:03
  • Entendo, acho um pouco "frio" começar sem um bom dia/boa noite e terminar sem agradecer, mas ok.
    – Stan
    Commented 13/10/2017 às 10:11
  • Te entendo perfeitamente, também questionei isso quando entrei, mas depois você acaba entendendo. E como o site é para "quem fala português" o seu "bom dia" pode ser "boa tarde" ou "noite" pra quem está lendo, enfim, dá uma lida no link q mandei, ele explica melhor os motivos, alias foi esse link q me ajudou a compreender melhor isso.
    – user28595
    Commented 13/10/2017 às 11:27

1 Resposta 1

4

O problema está no obter dos elementos para marcar como checked, aqui:

function all_check(marcar) {
    var itens = document.getElementsByTagName('checkbox');

Está a tentar ir buscar todas as etiquetas <checkbox>, mas as checkboxes na verdade são etiquetas <input type="checkbox"> logo não as consegue obter.

Trocando essa linha para:

var itens = document.querySelectorAll('input[type=checkbox]');

Ele já funciona, pois agora obtem os elementos com base num seletor de css, em que se especificou etiquetas <input> com tipo checkbox.

Para garantir que o array escolhidas é construído corretamente é preciso fazer algumas alterações. A primeira é apenas apanhar as checkboxes certas fazendo:

var itens = document.querySelectorAll('input[type=checkbox]:not(.todas)');

Que apanha todas as checkboxes menos a que tem a class todas, para não tentar guardar o correspondente à opção todas no array escolhidas. Isto implica aplicar uma classe diferente à checkbox que é para marcar todas:

<input class="todas" type="checkbox" onclick="all_check(this.checked);">

Para poder aplicar a mesma lógica no marcar todas e no marcar cada uma individualmente optei por criar uma função só para fazer isso:

function alterarCheck(checkbox, marcar, objetoJson) {
  if (marcar) {
    checkbox.closest('li').classList.add('selecionado'); //agora com add

    //apenas adiciona ao array se ainda não existir
    if (escolhidas.filter(x => (x.nome == objetoJson.nome && x.data == objetoJson.data)).length == 0) {
      escolhidas.push(objetoJson);
    }
  } else {
    checkbox.closest('li').classList.remove('selecionado'); //agora com remove
    escolhidas = escolhidas.filter(el => el != objetoJson);
  }
}

Agora esta função será utilizada em ambos os casos. Note que agora em vez de fazer toggle da classe de seleção ela tem de ser adicionada com add ou removida com remove com base no valor do check. Isto acontece porque você pode manualmente selecionar os elementos e de seguida fazer selecionar todos, mesmo eles já estando, o que iria fazer com que desmarcasse a classe de CSS.

Exemplo:

function alterarCheck(checkbox, marcar, objetoJson) {
  if (marcar) {
    checkbox.closest('li').classList.add('selecionado');
    if (escolhidas.filter(x => (x.nome == objetoJson.nome && x.data == objetoJson.data)).length == 0) {
      escolhidas.push(objetoJson);
    }
  } else {
    checkbox.closest('li').classList.remove('selecionado');
    escolhidas = escolhidas.filter(el => el != objetoJson);
  }
}

function all_check(marcar) {
  const itens = document.querySelectorAll('input[type=checkbox]:not(.todas)');

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

  for (let i = 0; i < itens.length; i++) {
    itens[i].checked = marcar;
    alterarCheck(itens[i], marcar, json[i]);
  }

  console.log(escolhidas);
}

var json = [{
    nome: 'Pedro',
    data: '13/09/2017'
  },
  {
    nome: 'Lucas',
    data: '13/09/2017'
  },
]

var mydiv = document.getElementById("lista");
mydiv.innerHTML = "";
var ul = document.createElement("ul");
mydiv.appendChild(ul);

var escolhidas = [];
json.forEach(function(obj) {
  var li = document.createElement("li");
  ul.appendChild(li);
  Object.keys(obj).forEach(function(chave) {
    var div = document.createElement("div");
    div.classList.add(chave);
    div.textContent = obj[chave];
    li.appendChild(div);
  });
  var checkbox = document.createElement("input");
  checkbox.type = 'checkbox';
  checkbox.name = 'checkbox';
  checkbox.addEventListener('change', function() {
    //aqui chama agora também o alterarCheck passando os valores necessários
    alterarCheck(checkbox, checkbox.checked, obj);
    console.log(escolhidas);
  });
  li.appendChild(checkbox);
});
.selecionado {
  background-color: #efe;
}
<input class="todas" type="checkbox" onclick="all_check(this.checked);">
<span id="acao">Marcar</span> <br>

<div id="lista">
</div>

Documentação para o querySelectorAll

8
  • Funciona, mas como eu faço para que tenha o mesmo efeito de clicar em uma por uma, preciso que salve o valor em uma array igual quando clico em apenas uma, obrigado
    – Stan
    Commented 13/10/2017 às 9:46
  • @PlanetWar "mesmo efeito de clicar em uma por uma", pode elaborar essa afirmação ? Não percebi muito bem
    – Isac
    Commented 13/10/2017 às 9:50
  • No código do post ao clicar em apenas uma ele salva o valor e muda a cor de fundo, ao mesmo tempo exibe no console o valor do nome marcado, agora ao clicar em marcar todas não acontece o mesmo.
    – Stan
    Commented 13/10/2017 às 9:52
  • @PlanetWar Só vendo esse código especificamente, pois deve estar a fazer alguma coisa especifica que impeça de considerar as corretas.
    – Isac
    Commented 13/10/2017 às 9:54
  • O código está no post, clique em alguma checkbox e verá que o fundo muda para dar o efeito selecionado, e ao mesmo tempo salva o valor em uma array
    – Stan
    Commented 13/10/2017 às 9:54

Você deve fazer log-in para responder a esta pergunta.

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