Question

我用jQuery开发了一个todo列表，现在我想要完成已完成的项目。我怎么能这样做？

HTML：

<title>Test02 - ToDo List</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script language="javascript" src="try.js"></script>


<body>  
    add new item: </br>
    <div id = "container">
        <input id="txtin" type="text" />
        <button id="btnin">Add</button>
        </br>
    </div>
</body>

使用Javascript：

$(document).ready(function(){
    $("#btnin").click(function(){
        $("#container").append('<span><input type="checkbox" id="chck">' + $("#txtin").val() + '<br /></span>');
    });
});

Answer 1

您可以使用css来浏览文本，并且可以使用jQuery添加和删除类，因为选中并取消选中复选框。

另外，作为一个FYI，你不希望有多个具有相同id的html元素，所以我改变了id＆＃34; chck＆＃34;上课。

<强> CSS

.completed {
    text-decoration: line-through;
}

<强>的Javascript

$(document).ready(function(){
    $("#btnin").click(function(){
        $("#container").append('<span><input type="checkbox" class="chck">' + $("#txtin").val() + '<br /></span>');

        $("input:checkbox").click(function () {
            var $this = $(this);
            if (this.checked) {
                $this.parent().addClass('completed');
            } else {
                $this.parent().removeClass('completed');
            }
        });
    });
});

以下是其中fiddle的示例。

jQuery待办事项列表交叉项目

1 个答案: