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

您可以使用带有text-decoration: line-through;的类。单击复选框后，您可以简单地使用.toggleClass()切换课程。

请注意：避免内联CSS是一种很好的做法。我添加了另一个类来设置margin属性。

$(() => {
  $('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 2

我宁愿只简单而有效地使用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 3

问题出在下面一行

document.getElementById("checkbox").checked

您正在按其标记名调用元素。

分析您的要求后，建议您绑定一个单独的事件来处理复选框

@mamun的回答很好。要进行更精细的调整，您可以绑定更改事件而不是单击事件。

Answer 4

这也适用于您添加的任何新列表元素

$('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>

选中复选框时划掉文字

4 个答案: