有没有一种方法可以单击复选框以使列表项处于活动状态？

Question

我想选中一个复选框，一个类将被添加到一个列表项中，这将减少不透明度，并在列表项中划线以显示任务的完成。

这就是我所做的，但没有用。

var btn = document.querySelector('.btn') 
var inputValue = document.querySelector('input');
var ulContainer = document.querySelector('.ul-container');
var input = document.querySelector('.check-input');

console.log(input);

var li = document.createElement('li'); // EVENTLISTENERS

btn.addEventListener('click', generateToDo);

input.addEventListener('click', complete); // FUNCTION 

function generateToDo() {
  var div = document.createElement('div');
  div.classList.add('div-1');
  var ul = document.createElement('ul');
  li = document.createElement('li');
  var z = inputValue.value;
  li.textContent = z;
  ul.appendChild(li);
  div.appendChild(ul);
  var input = document.createElement('input');
  input.type = 'checkbox';
  input.classList.add('check-input');
  div.appendChild(input);
  var dleBtn = document.createElement('button');
  dleBtn.innerHTML = '';
  dleBtn.classList.add('btn-trash');
  div.appendChild(dleBtn);
  ulContainer.appendChild(div);
}

<div class="main-container">
  <div class="ul-container center"></div>
</div>`

Answer 1

我想你想做这样的事情：

let list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);

* {
  box-sizing: border-box;
}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;

  user-select: none;
}


ul li.checked {
  opacity: 0.3;
  text-decoration: line-through;
}

<ul id="myUL">
  <li>Todo1</li>
  <li class="checked">Todo2</li>
  <li>Todo3</li>
</ul>

这可能不是最好的解决方案，但对于一个简单的待办事项应用程序来说已经足够好了。

可以在here 找到完整的待办事项应用程序。