Question

我还在学习javascript。我想设计一个todo应用程序。我完成了html和css部分。我已经完成了一个代码，可以在任务完成时对列表中的项目进行复选。但是，当使用javascript或jquery复选框时，我希望在项目中绘制一条线。

<!DOCTYPE html>
<html>

<head>
    <title>Todolist</title>
    <link rel="stylesheet" type="text/css" href="todo.css">
    <script src="js/jquery-3.2.1.min.js"></script>
</head>

<body>
    <div class="container">
        <h1>Todos</h1>
        <div class="center">
            <div class="top"></div>
            <section id="formdata">
                <form>
                    <input id="new-task-input" type="text" placeholder="What needs to be done?">
                    <br>
                </form>
            </section>
            <section id="data">
                <ul id="todolist-container"></ul>
            </section>
        </div>
        <button type="button" id="add-task-button">Add Task</button>
    </div>
    <script type="text/template" id="list-item-template">
        <li>
            <label>
                <input type="checkbox" id="checkbox">
                <!-- TASK_NAME -->
            </label>
        </li>
    </script>
    <script>
    var addTaskButton = document.getElementById("add-task-button");
    var newTaskInput = document.getElementById("new-task-input");
    var todolistContainer = document.getElementById("todolist-container");
    var templateElement = document.getElementById("list-item-template");
    var template = templateElement.innerText;

    addTaskButton.addEventListener('click', function(event) {
        var taskName = newTaskInput.value;
        newTaskInput.value = "";


        var taskHTML = template.replace("<!-- TASK_NAME -->", taskName);
        todolistContainer.insertAdjacentHTML('afterbegin', taskHTML);
    });
    </script>
</body>

</html>

Answer 1

这可以通过使用一些取决于复选框状态的文本修饰来简单地添加/删除一个类来实现。

例如：

$("input[type='checkbox']").change(function() {
 if($(this).is(':checked')) {
   $(this).next('label').addClass('checked');
 } else {
    $(this).next('label').removeClass('checked');
 }
});

label.checked {
  text-decoration: line-through;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>

  <input type="checkbox" value="a" id="checkboxa" name="test[]" />
  <label for="checkboxa">Option A</label>
  <br/>
  <input type="checkbox" value="b" id="checkboxb" name="test[]" />
  <label for="checkboxa">Option B</label>
 
 </form>

如何使用javascript在检查项目中绘制一条线

1 个答案: