チェックボックスToDoリストのcheckBoxをクリックしたときにテキストを外す方法

Question

テキストの横にあるチェックボックスをクリックするとテキストを外していますが、何らかの理由で次の要素をすべて横切ります私は1つだけをクリックしました。イベントハンドラを使用していましたが、何らかの理由で動作しません。どんな助力も非常に感謝しています。あなたは、単純なHTML/CSSでこれを行うことができますおかげ

function myFunction() { 
 
    var item = document.getElementById("todoInput").value 
 
    var checkBox = document.createElement("input"); 
 
    checkBox.type = "checkbox"; 
 
    checkBox.id = "checkbox" 
 
    checkBox.onclick = updateItem 
 
    var text = document.createTextNode(item) 
 
    var newItem = document.createElement("li") 
 
    newItem.className = "addedClass" 
 
    newItem.appendChild(text) 
 
    if (item === "") { 
 
     alert("please fill in the blanks"); 
 
    } else { 
 
     var crap = document.getElementById("todoList") 
 
     crap.appendChild(newItem) 
 
     var addhere = document.getElementById("todoList") 
 
     addhere.appendChild(checkBox); 
 
    } 
 

 
    function updateItem() { 
 
     if (document.getElementById("checkbox").checked) { 
 
      document.getElementById("todoList").style.textDecoration = "line-through" 
 
     } 
 
    } 
 
}

<form name="myForm" id="todoForm"> 
 
    <input id="todoInput" name="fname" required> 
 
    <button type="button" onclick="myFunction()">OK</button> 
 
</form> 
 
<ol id="todoList"></ol>

Answer 1

は、JSのための必要性：

（例を更新し、余分なコードを削除していない）

ol li del { 
 
text-decoration: none; 
 
} 
 
ol li input[type=checkbox]:checked ~ del { 
 
text-decoration: line-through; 
 
}

<ol> 
 
    <li><input type="checkbox"><del>This is a list-item</del></li> 
 
</ol>

Answer 2

新しいリストアイテムを追加するたびに、新しいクリックハンドラbounが必要になることがあります新しいエントリにD：

checkBox.onclick = updateItem.bind(checkBox); 

コンプリートコード：[の

function myFunction() { 
 
    var item = document.getElementById("todoInput").value; 
 
    if (item === "") { 
 
    alert("please fill in the blanks"); 
 
    } else { 
 
    var text = document.createTextNode(item); 
 
    var newItem = document.createElement("li"); 
 
    var crap = document.getElementById("todoList"); 
 
    crap.appendChild(newItem); 
 
    var checkBox = document.createElement("input"); 
 
    checkBox.type = "checkbox"; 
 
    checkBox.onclick = updateItem.bind(checkBox); 
 
    newItem.appendChild(checkBox); 
 
    newItem.appendChild(text); 
 
    document.getElementById("todoInput").value = ""; 
 
    checkBox.className = "addedClass"; 
 
    } 
 

 
    function updateItem() { 
 
    if (this.checked) { 
 
     this.parentNode.style.textDecoration = "line-through"; 
 
    } else { 
 
     this.parentNode.style.textDecoration = "none"; 
 
    } 
 
    } 
 
}

<form name="myForm" id="todoForm"> 
 
    <input id="todoInput" name="fname" required> 
 
    <button type="button" onclick="myFunction()">OK</button> 
 
</form> 
 
<ol id="todoList"></ol>