adding style to li elements if checkbox is checked-CodePudding

so below is my code for the Ul and Li elements.

 <ul id = "to-do-list" >
            <li> <input type="checkbox"> to school</li>
            <li> <input type="checkbox"> do website</li>
        </ul>

it is for a To do list: code for js function to add task items is below as well.

document.getElementById("submit-task").onclick = function (){
    
    let li = document.createElement("li");
    let text = document.getElementById("task").value; 
    let checkbox = document.createElement("input");
    checkbox.type ="checkbox";
    checkbox.value = text;
    checkbox.checked = false;

    li.appendChild(checkbox);

    let textnode = document.createTextNode(text);

    li.appendChild(textnode);

    if (text === ''){
        alert("There is no task entered");
    }
    else{
        document.getElementById("to-do-list").appendChild(li);
    } 
    document.getElementById("task").value="";
    
};

I want to change the li text if a checkbox is checked. how can I do this?

CodePudding user response：

You can add a 'change' event listener on the checkboxes and then apply a particular style or class to the parent element.

Add following JS code to your project:

    const checkBoxes = document.querySelectorAll("#to-do-list input")

    checkBoxes.forEach(checkBox => {
      checkBox.addEventListener("change", function (e) {
        const parentNode = e.target.parentNode

        if (e.target.checked)
          parentNode.style.color = "red"
        else
          parentNode.style.color = "black"
      })
    })

CodePudding user response：

Though DCR's solution is good, it doesn't work if the input gets unchecked. Here's a little modification that i've made, hope it will solve the problem!

function changeOnChecked(){
 const a = event.target.closest('input').checked;
 if(a)
  event.target.closest('li').style.color='red'
 else
   event.target.closest('li').style.color='black'
}

<ul id = "to-do-list" >
            <li> <input type="checkbox" onclick="changeOnChecked()"> to school</li>
            <li> <input type="checkbox" onclick="changeOnChecked()"> do website</li>
        </ul>

CodePudding user response：

The way you have got it set up isn't recommended, and what I mean by that is, you have the input checkbox inside the li tag along with the text so you won't be able to change it.

This is what I would do:

<li><input type="checkbox" data-num=0/><span id="t0">text goes here</span></li>

You can notice in the checkbox I have added a data-num attribute, this will contain the global variable number which increments after adding a task. It will help to identify the span.

To set the event listener you can do this after creating the event:

checkbox.onclick = changeText(event)


function changeText(e){
    let elem = e.target;

    let span = document.querySelector("#t" elem.getAttribute('data-num');
    
    if(elem.checked)
        span.innerHTML = "It is checked";
    else
        span.innerHTML = "It is not checked"'
}

CodePudding user response：

function deltaStyle(){
 event.target.closest('li').style.color='red'
}

 <ul id = "to-do-list" >
            <li> <input type="checkbox" onclick="deltaStyle()"> to school</li>
            <li> <input type="checkbox" onclick="deltaStyle()"> do website</li>
        </ul>