1

Eu tenho uma estrutura igual a essa

 <ul id="nomes">
    <li class="classli">
      <div class="Nome">Pedro</div>
      <div class="data">13/09/2017</div>
      <input class="check" type="checkbox">
   </li>
   <li class="classli">
      <div class="Nome">Lucas</div>
      <div class="data">13/09/2017</div>
      <input class="check" type="checkbox">
   </li>
</ul>

Estou usando esse JS para gerar o ul/li

var obj = JSON.parse(req.responseText);

    document.getElementById("tabLista").innerHTML = "";

    var mydiv = document.getElementById("tabLista");
    var minhaul = document.createElement("ul"); 
    minhaul.setAttribute("id", "sul");  


    var novali = document.createElement("li");
    var novadivtipo = document.createElement("div");
    var novadivnome = document.createElement("div");
    var novadivtamanho = document.createElement("div");
    var novocheckbox = document.createElement("input");
    novali.setAttribute("class", "classli");

    novadivtipo.setAttribute("class", "tipo");
    novadivtipo.setAttribute("id", "Tipo" + R);
    novadivnome.setAttribute("class", "nomediv");                 
    novadivtamanho.setAttribute("class", "tamanhodiv");
    novocheckbox.setAttribute("class", "checkdelete");
    novocheckbox.setAttribute("type", "checkbox");

    img.setAttribute("class", "Icon");
    novadivtipo.appendChild(img);  

    novali.setAttribute("id", (obj.Lista[R].Nome));

    novali.appendChild(novadivtipo);
    novali.appendChild(novadivnome);
    novali.appendChild(novadivtamanho);
    novali.appendChild(novocheckbox);
    minhaul.appendChild(novali);
    mydiv.appendChild(minhaul);

Meu json que estou usando para gerar o html

{
  "d": "api",
  "Lista": [
    {
      "Data": "12/12/2017",
      "Nome": "Lucas"
    }
  ],
  "arq": "3",
  "pasta": "5"
}

Eu quero clicar na checkbox de cada li e enviar o valor de cada nome para uma array e mudar o fundo da li para uma outra cor, e quando a checkbox for desmarcada remover a mesma da array, eu achei a solução somente com jquery, mas eu gostaria de uma ajuda para resolver esse problema somente com js puro.

Obrigado pela ajuda :)

8
  • Como é que estás a gerar esse HTML? Talvez seja possível fazer isso de maneira mais reativa que ler HTML no DOM.
    – Sergio
    Commented 9/10/2017 às 7:14
  • Olá, estou recuperando os dados por um json e colocando ele através de um createElement e setAttribute.
    – Stan
    Commented 9/10/2017 às 7:17
  • 1
    Ok, então há uma maneira mais interessante de fazer isso :) Podes colocar esse código que insere esses ul/li?
    – Sergio
    Commented 9/10/2017 às 7:19
  • Posso sim, um momento
    – Stan
    Commented 9/10/2017 às 7:29
  • Ambos Pedro e Lucas vêm do mesmo JSON? ou tens um json por elemento? Acho que me estou a lembrar de uma outra pergunta tua... ias buscar os dados um a um certo? então tens algures uma arrays de jsons?
    – Sergio
    Commented 9/10/2017 às 7:37

2 Respostas 2

3

Aqui fica uma sugestão. O código é gerado a partir do JSON, muda a cor quando for selecionado e o estado atual das selecionas está guardado (e atualizado) na variável escolhidas.

Sugestão:

// var obj = JSON.parse(req.responseText);
var json = [{
    nome: 'Pedro',
    data: '13/09/2017'
  },
  {
    nome: 'Lucas',
    data: '13/09/2017'
  },
]

var mydiv = document.getElementById("tabLista");
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.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;
}
<div id="tabLista">
</div>

8
  • minha lista de nomes fica dentro da uma outra coluna dentro do json, denominada Lista, eu usava o obj.Lista[R].Nome para recuperar os nomes, como eu faço isso nesse novo exemplo ?
    – Stan
    Commented 9/10/2017 às 8:22
  • @PlanetWar nesse caso deve bastar obj.Lista.forEach onde eu tinha json.forEach. Se não funcionar mostra um exemplo desse JSON que eu adapto a resposta.
    – Sergio
    Commented 9/10/2017 às 8:29
  • 1
    Olá, tentei obj.List.forEach(function(obj) { e obj.List.forEach(function(obj) { e não foi, um momento vou pegar o json
    – Stan
    Commented 9/10/2017 às 8:42
  • Editei a pergunta e coloquei o json, desculpe qualquer coisa, sou novo aqui :)
    – Stan
    Commented 9/10/2017 às 8:48
  • 1
    Obrigado, funcionou perfeitamente :)
    – Stan
    Commented 9/10/2017 às 8:54
1

Há várias maneiras de se fazer isso. Segue uma alternativa:

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
 <ul id="nomes">
    <li id="classliopt1">
      <div class="Nome">Pedro</div>
      <div class="data">13/09/2017</div>
      <label for="opt1" id="lblopt1">
         <input class="check" id="opt1" type="checkbox" onclick="toggleCheckbox(this);"> teste
      </label>
   </li>
   <li id="classliopt2">
      <div class="Nome">Lucas</div>
      <div class="data">13/09/2017</div>
      <label for="opt2" id="lblopt2">
         <input class="check" id="opt2" type="checkbox" onclick="toggleCheckbox(this);"> teste
      </label>
   </li>
  </ul>
</body>
</html>

JS

function toggleCheckbox(handle) {
  var tmpElement = document.getElementById("classli" + handle.id)

  if (handle.checked){
    tmpElement.style.color = "#f00";
    tmpElement.style.backgroundColor = "#000";
  }
  else{
    tmpElement.style.color = "#000";
    tmpElement.style.backgroundColor = "transparent";
  }

}
5
  • qual a forma de fazer isso usando event listener ?
    – Stan
    Commented 9/10/2017 às 8:14
  • Dentro do evento "checkbox.addEventListener('change', function() {" você deverá implementar o código que coloquei no exemplo na função "toggleCheckbox". Commented 9/10/2017 às 8:22
  • eu estou na duvida de como usar o this para recupear a id do checkbox, porque ele é gerado dinamicamente
    – Stan
    Commented 9/10/2017 às 8:23
  • Não há problema em gerá-lo dinamicamente desde que você garanta que o id será único para cada elemento; assim como tentei mostrar no exemplo diferenciando os LI's com o sufixo opt1, op2... Commented 9/10/2017 às 8:32
  • Obrigado pela ajuda :)
    – Stan
    Commented 9/10/2017 às 8:55

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 .