title: Cross out text when checkbox is checked
body: <p>I'm creating a Chrome Extension that allows the user to create a todo list. So far I am able to type in a task and submit it.  The user is also able to check off the todo list.  Currently, I am trying to make it so if the user checks off a task, the text has a line through it.</p>
  
  <p><strong>This is the Javascript code that I tried using:</strong></p>
  
  <pre><code>$(() =&gt; {
    $('input').on('keypress', function(e) {
      if (e.keyCode == 13) {
        const newTask = $(this).val();
        if (newTask) {
  
          var li = $("&lt;li&gt;&lt;input type='checkbox'&gt;&lt;label&gt;" + newTask + "&lt;/label&gt;&lt;/li&gt;");
          $('#tasksUL').append(li);
          $(this).val("");
        }
      }
      if (document.getElementById("checkbox").checked)
      {
        document.getElementById("tasksUL").style.textDecoration="line-through"
      }
    });
  });
  </code></pre>
  
  <p><strong>HTML:</strong> </p>
  
  <pre><code>&lt;input type="text" name="newtask" value="" spellcheck="false" placeholder="New Task" id="newtask"&gt;
  &lt;ul id="tasksUL"&gt;
    &lt;li&gt;&lt;input type="checkbox" id="newtaskitem" style="margin-right: 30px"&gt;&lt;label&gt;test&lt;/label&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Original Javascript:</strong></p>
  
  <pre><code>$(() =&gt; {
    $('input').on('keypress', function(e) {
      if (e.keyCode == 13) {
        const newTask = $(this).val();
        if (newTask) {
  
          var li = $("&lt;li&gt;&lt;input type='checkbox'&lt;label&gt;" + newTask + "&lt;/label&gt;&lt;/li&gt;");
          $('#tasksUL').append(li);
          $(this).val("");
        }
      }
    });
  });
  </code></pre>