Change li background by clicking the checkbox

Question

Change li background by clicking the checkbox

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

I have a structure like this

 <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>

I'm using this JS to generate 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);

My json I'm using to generate html

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

I want to click on the checkbox of each li and send the value of each name to an array and change the background of the li to another color, and when the checkbox is unchecked remove it from the array, I found the solution only with jquery, but I'd like some help solving this problem only with pure js.

Thanks for the help:)

javascript

asked by anonymous 09.10.2017 / 09:12

2 answers

1

There are several ways to do this. Here's an alternative:

<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";
  }

}

09.10.2017 / 10:09

Is there a difference between the use of underscore and .this? Force user to select the Radio Button inside the GroupBox

score 3 · Accepted Answer

Here's a suggestion. The code is generated from JSON, changes the color when it is selected and the current state of the selections is saved (and updated) in the escolhidas variable.

Suggestion:

// 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>