Skip to main content
3 de 7
adicionou 23 caracteres ao conteúdo
Stan
  • 445
  • 2
  • 12

Marcar todas as checkbox com js puro

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

Obrigado pela ajuda

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>

Stan
  • 445
  • 2
  • 12