Checkbox how to cross out the text when clicking checkBox for a todo list

Question

I'm trying to cross out the text when clicking on the checkbox next to the text and for some reason it just crosses out all of the next elements even though I only clicked on only one. I was using event handlers but its not working for some reason. Any help is very much appreciated. Thanks

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>

Try as mentioned here http://stackoverflow.com/a/30975750/4813148 — Rajesh, Dec 19 '16 at 12:21
Possible duplicate of [Add strikethrough to checked checkbox](http://stackoverflow.com/questions/30975459/add-strikethrough-to-checked-checkbox) — Rajesh, Dec 19 '16 at 12:25

junkfoodjunkie · Answer 1 · 2016-12-19T12:28:08.260

1

You can do this in simple HTML/CSS, no need for JS:

(Updated the example, removed superfluous code)

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>

edited Dec 19 '16 at 12:28

answered Dec 19 '16 at 12:21

junkfoodjunkie

3,168
1
19
33

score 0 · Answer 2 · answered Dec 19 '16 at 13:35

Each time you add a new list item, you may need a new click handler bound to the new entry:

checkBox.onclick = updateItem.bind(checkBox);

Complete code:

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>

Checkbox how to cross out the text when clicking checkBox for a todo list

2 Answers2