Javascript 将我的“待办事项”标记为完成的最简单方法是什么？

我这里有一把小提琴：

编辑：我想我可以在这里绑定一个新函数，在待办事项列表的已完成项中添加一个删除。通过单击或添加复选框来完成

我有CSS，但我缺少JS来将它们联系在一起

---

我正在尝试创建一个简单的点击删除，以显示项目何时标记为已完成。任何帮助都将不胜感激

您已经接近CSS，但最好的办法是在选中复选框时，尽可能用图像svg替换复选框

文本装饰：在这里行不通-这只适用于文本

通常，复选框的标签将获得图像，并且复选框本身将被隐藏。可以单击标签并执行与输入/复选框本身相同的操作

请查看此答案，看看它是否有助于您实现目标：

---

尝试将jquery事件侦听器添加到复选框的id中。告诉id在单击时切换css，您应该可以开始了。你知道如何实现吗？

我不明白-你想实现什么？所以添加click event listener并添加类？@epascarello这就是我要做的。但我真的不知道从哪里开始。这个项目只是被扔在我的膝上，没有任何指导或指示类似于if$checkbox.is:checked{//add strike through}或者{//remove strike through}在复选框更改时？！！如果你看小提琴，还没有复选框。除了完成标记之外，所有功能都可以使用。我觉得很失落，我知道那种感觉。。。我已经更新了你的小提琴，看看css的结尾，了解我是如何做到这一点的。我用克里斯托弗·斯凯尔顿的密码笔作为基础

View.prototype.render = function (viewCmd, parameter) {
    var that = this;
    var viewCommands = {
        showEntries: function () {
            that.$todoList.innerHTML = that.template.show(parameter);
        },
        removeItem: function () {
            that._removeItem(parameter);
        },
        updateElementCount: function () {
            that.$todoItemCounter.innerHTML = that.template.itemCounter(parameter);
        },
        contentBlockVisibility: function () {
            that.$main.style.display = that.$footer.style.display = parameter.visible ? 'block' : 'none';
        },
        setFilter: function () {
            that._setFilter(parameter);
        },
        clearNewTodo: function () {
            that.$newTodo.value = '';
        },
        editItem: function () {
            that._editItem(parameter.id, parameter.title);
        },
        editItemDone: function () {
            that._editItemDone(parameter.id, parameter.title);
        }
    };

    viewCommands[viewCmd]();
};

View.prototype._itemId = function (element) {
    var li = $parent(element, 'li');
    return parseInt(li.dataset.id, 10);
};

View.prototype._bindItemEditDone = function (handler) {
    var that = this;
    $live('#todo-list li .edit', 'blur', function () {
        if (!this.dataset.iscanceled) {
            handler({
                id: that._itemId(this),
                title: this.value
            });
        }
    });

    $live('#todo-list li .edit', 'keypress', function (event) {
        if (event.keyCode === that.ENTER_KEY) {
            // Remove the cursor from the input when you hit enter just like if it
            // were a real form
            this.blur();
        }
    });
};

View.prototype._bindItemEditCancel = function (handler) {
    var that = this;
    $live('#todo-list li .edit', 'keyup', function (event) {
        if (event.keyCode === that.ESCAPE_KEY) {
            this.dataset.iscanceled = true;
            this.blur();

            handler({id: that._itemId(this)});
        }
    });
};

View.prototype.bind = function (event, handler) {
    var that = this;
    if (event === 'newTodo') {
        $on(that.$newTodo, 'change', function () {
            handler(that.$newTodo.value);
        });

    } else if (event === 'itemEdit') {
        $live('#todo-list li label', 'dblclick', function () {
            handler({id: that._itemId(this)});
        });

    } else if (event === 'itemRemove') {
        $live('#todo-list .destroy', 'click', function () {
            handler({id: that._itemId(this)});
        });

    } else if (event === 'itemEditDone') {
        that._bindItemEditDone(handler);

    } else if (event === 'itemEditCancel') {
        that._bindItemEditCancel(handler);

    } else if (even === 'itemComplete') {
        that._bindItemComplete(handler);
    }
};