Вычеркните текст, когда флажок установлен

Question

Я создаю расширение Chrome, которое позволяет пользователю создавать список задач. Пока я могу набрать задание и отправить его. Пользователь также может пометить список задач. В настоящее время я пытаюсь сделать так, чтобы, если пользователь помечает задачу, текст через нее проходит через строку.

Это код Javascript, который я пытался использовать:

$(() => {
  $('input').on('keypress', function(e) {
    if (e.keyCode == 13) {
      const newTask = $(this).val();
      if (newTask) {

        var li = $("<li><input type='checkbox'><label>" + newTask + "</label></li>");
        $('#tasksUL').append(li);
        $(this).val("");
      }
    }
    if (document.getElementById("checkbox").checked)
    {
      document.getElementById("tasksUL").style.textDecoration="line-through"
    }
  });
});

HTML:

<input type="text" name="newtask" value="" spellcheck="false" placeholder="New Task" id="newtask">
<ul id="tasksUL">
  <li><input type="checkbox" id="newtaskitem" style="margin-right: 30px"><label>test</label></li>
</ul>

Оригинальный Javascript:

$(() => {
  $('input').on('keypress', function(e) {
    if (e.keyCode == 13) {
      const newTask = $(this).val();
      if (newTask) {

        var li = $("<li><input type='checkbox'<label>" + newTask + "</label></li>");
        $('#tasksUL').append(li);
        $(this).val("");
      }
    }
  });
});

Answer 1

Я скорее использую просто CSS pseudo-class легко и эффективно.

#newtaskitem[type=checkbox]:checked + label{
  text-decoration: line-through; 
}

<input type="text" name="newtask" value="test" spellcheck="false" placeholder="New Task" id="newtask">
<ul id="tasksUL">
  <li><input type="checkbox" value="text" id="newtaskitem" style="margin-right: 30px"><label>Welcome to Droplet's 'Tasks' feature!</label></li>
</ul>

Answer 2

Вы можете использовать класс с text-decoration: line-through;.Нажав на флажок, вы можете просто переключать класс с помощью .toggleClass().

Обратите внимание: Рекомендуется избегать встроенного CSS.Я добавил еще один класс для установки свойства поля.

$(() => {
  $('input').on('keypress', function(e) {
    if (e.keyCode == 13) {
      const newTask = $(this).val();
      if (newTask) {
        var li = $("<li><input type='checkbox' class='right-margin' <label>" + newTask + "</label></li>");
        $('#tasksUL').append(li);
        $(this).val("");
      }
    }
  });
  
  $('body').on('click', ':checkbox', function(e) {
    $(this).parent().toggleClass('stroked');
  });
});

.stroked { 
  text-decoration: line-through; 
}
.right-margin{
  margin-right: 30px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input type="text" name="newtask" value="" spellcheck="false" placeholder="New Task" id="newtask">
<ul id="tasksUL">
  <li><input type="checkbox" id="newtaskitem" class="right-margin"><label>test</label></li>
</ul>

Answer 3

это работает для любых новых элементов списка, которые вы добавляете тоже

$('input').on('keypress', function(e) {
  if (e.keyCode == 13) {
    const newTask = $(this).val();
    if (newTask) {

      var li = $("<li><input class='taskInput' style='margin-right: 30px' type='checkbox'><label>" + newTask + "</label></li>");
      $('#tasksUL').append(li);
      $(this).val("");
    }
  }
});

$(document).on('change', '.taskInput', function() {
  console.log('changed')
  if (this.checked) {
    $(this).siblings().css('text-decoration', 'line-through')
  } else {
    $(this).siblings().css('text-decoration', 'none')
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="newtask" value="" spellcheck="false" placeholder="New Task" id="newtask">
<ul id="tasksUL">
  <li class="taskLI"><input class="taskInput" type="checkbox" id="newtaskitem" style="margin-right: 30px"><label class="textLabel">Welcome to Droplet's 'Tasks' feature!</label></li>
</ul>

Answer 4

Проблема в приведенной ниже строке

document.getElementById("checkbox").checked

Вы вызываете элемент по его тэгу.

Анализируя ваше требование, я предлагаю вам связать отдельное событие для обработки флажка

@ mamun's ответ хорошо следовать.Для более точной настройки вы можете связать событие изменения, а не событие щелчка.