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