Есть некий todo list, при нажатии на checkbox срабатывают все строчки, как решить проблему?

Question

[Дима Самсонов]

Есть некий todo list, при нажатии на checkbox срабатывают (зачеркиваются) все строчки, а нужно что бы только одна, именно та на которой сработал heckbox , хотя по сути элементы добавляются с одинаковыми классами.
вот что получилось
https://jsfiddle.net/emdxwnfu/

Answer 1

[Александр]

Самое простое решение, которое приходит на ум:
https://jsfiddle.net/kbuv20q4/

Answer 2

[0xD34F]

Во-первых, вместо клика надо обрабатывать событие change.

Во-вторых, вместо того, чтобы каждый раз назначать обработчик всем чекбоксам, добавим делегированный обработчик контейнеру. То же, кстати, касается и удаления.

$('.add-task').click(function() {
  const task = $('.input-task').val();
  if (!task) {
    alert('пусто');
    return false;
  }

  $('.todos-container').append(`
    <div class="todo-container">
      <label>
        <b class="task-text">${task}</b>
        <input class="toggle-task" type="checkbox">
      </label>
      <button class="del-task">delete</button>
    </div>
  `);

  $('.input-task').val('');
});

$('.todos-container')
  .on('change', '.toggle-task', function() {
    $(this)
      .closest('.todo-container')
      .find('.task-text')
      .toggleClass('task-done', this.checked);
  })
  .on('click', '.del-task', function() {
    $(this).closest('.todo-container').remove();
  });

.task-done {
  text-decoration: line-through;
}

Answer 3

[Overfinch]

Генерируй новый id для каждого нового элемента, и применяй класс который добавляет зачеркивание по id.