Coloquei uma function para marcar todas as checkbox, em um script que o Moderador SergioIsac 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>