如果选中复选框，则向li元素添加样式。

Question

下面是Ul和Li元素的代码。

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

这是一个待办事项列表: js函数添加任务项的代码也在下面。

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

如果选中复选框，我希望更改li文本。我该怎么做？

Answer 1

虽然DCR的解决方案很好，但是如果输入不被检查，它就不能工作。这是我做的一个小小的修改，希望它能解决这个问题！

​

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>

​

Answer 2

可以在复选框上添加“更改”事件侦听器，然后将特定的样式或类应用到父元素。

向项目中添加以下JS代码：

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

Answer 3

不推荐设置它的方式，我的意思是，在li标记中有输入复选框以及文本，所以您将无法更改它。

这就是我要做的：

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

您可以注意到，在复选框中，我添加了一个data-num属性，这将包含在添加任务后递增的全局变量号。它将有助于确定跨度。

若要设置事件侦听器，可以在创建事件后执行此操作：

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