如何创建像这个TodoMvc示例的注释

时间:2015-08-12 06:47:17

标签: javascript jquery html css todomvc

我想在链接下使用jQuery Html Css Js创建这样的注释表单。 http://todomvc.com/examples/flight/

这是我的HTML代码:

<form id="myform" action="whatever.php">
    <lable name="text">enter text</label>
    <input id="in" type="text" placeholder="What needs to be done?" />
    <input type="submit" value="Enter" />
</form>

<div class="results">
    <ul class="list">
    </ul>
</div>

这是我的jquery:

$( document ).ready(function() {
    $('#myform').submit(function(e){
        var val = $(this).find('#in').val();
        $('ul.list').append('<input id="check" type="checkbox"><p>' + val + '</p>');
        e.preventDefault();
    });

    $('ul.list').on("click", "input", function(){
        if( $(this).is(':checked') ) {
            $(this).next('p').css("text-decoration" ,  "line-through");
        } else {
            $(this).next('p').css("text-decoration", "none");
        }
    });
});

我想:

  1. 复选框输入类型和p标签位于同一行

  2. 在每个复选框旁边添加删除按钮以删除该笔记

  3. 选中所有复选框并取消选中所有

  4. 的按钮

0 个答案:

没有答案