Questions & Answers

Is there a way to click on a checkbox to make a list item active?

I want to check a checkbox and a class will be added to a list item that will reduce the opacity and also line-through the list item to show completion of task.

This is what I did but it is not working.

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


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

btn.addEventListener('click', generateToDo);

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

function generateToDo() {
  var div = document.createElement('div');
  var ul = document.createElement('ul');
  li = document.createElement('li');
  var z = inputValue.value;
  li.textContent = z;
  var input = document.createElement('input');
  input.type = 'checkbox';
  var dleBtn = document.createElement('button');
  dleBtn.innerHTML = '';
<div class="main-container">
  <div class="ul-container center"></div>

Answers(1) :

I think you want to do something like this:

let list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if ( === 'LI') {'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 class="checked">Todo2</li>

This probably isn't the best solution, but good enough for a simple todo app.

A complete todo app can be found here.

2023-01-20 23:10:11
the thing is I want to create a div, li, delete btn and the checkbox when a user click on a add button. so if a user check the checkbox a class will be added to the li is which the todo to show completion of the task.