jquery实现TODOList

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ToDoList</title>
    <link rel="stylesheet" type="text/css" href="ToDoList1.css">
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
     <div class="ToDoList_page">
       <div class="ToDoList_container">
         <div id="ToDoList_header">ToDoList:
               <input type="text" id="ToDoList_add" value="what do you need">
         </div>
         <div class="ToDoList_content">待处理事务</div>
             <input type='checkbox' id='all_checkbox' >select all
         <div id="ToDoList_events">
         </div>
             <p class="event_count"></p>
         </div>
       </div>

     </div>
  <script type="text/javascript" src="ToDoList1.js"></script>
</body>
</html>

(function(){
      'use strict';

           var add_list = $("#ToDoList_add");
           var event_context =add_list.val();
           var ToDoList_events = $("#ToDoList_events");
           var allCheckbox=$("#all_checkbox");

           var deleteHtml ='<a href="javascript:void(0)" class="event_delete">×</a>';
           var i=0;
            // 增加事件列表
                 $("#ToDoList_add").bind("keypress",function(event){
                      if(event.keyCode===13){
                        i++;
                        var events_list = '<div class="events_list" id=list_'+i+'></div>';
                        var checkboxHtml='<input type="checkbox" class="checkboxList" id=event_'+i+'></input>';
                        ToDoList_events.append(events_list);
                        $("#list_"+i).append(checkboxHtml).append(event_context).append(deleteHtml);
                        // console.log($(".events_list").get(0));
                     }
                 });
            // 全选和全不选
                $("#all_checkbox").bind("click",function(){
                       if(allCheckbox.prop('checked')){
                           $(".events_list input").prop("checked",true);
                           $(".events_list").addClass("addline");
                       }else{
                           $(".events_list input").prop("checked",false);
                           $(".events_list").removeClass("addline");
                        } 
                        events_count(); 
                  });
            // 给新增的元素动态绑定事件----事件代理

               $("#ToDoList_events").bind("click",function(e){
                    var eventId=e.target.id;
                    var isChecked=$("#"+eventId).prop("checked");

                    var eventsAllLength=$(".events_list").size();
                    var events_selected=$(".events_list input:checked").size();

                    if(eventsAllLength ===events_selected){
                      $("#all_checkbox").prop("checked",true);
                    }else{
                      $("#all_checkbox").prop("checked",false);
                    }

                    if(isChecked){
                      $("#"+eventId).prop("checked",true);
                      $("#"+eventId).parent(".events_list").addClass("addline");
                      
                    }else{
                      $("#"+eventId).prop("checked",false);
                      $("#"+eventId).parent(".events_list").removeClass("addline");
                    }
                    events_count();
               });
              // 删除某个事件列表
              $("#ToDoList_events").on("click","a",function(){
                        $(this).parent().remove(); 
                        events_count();
                    });

               function events_count(){
                   var event_length = $("#ToDoList_events input:checked").size();
                   $(".event_count").html('total:' + event_length + 'selected');
                   
               }

})();

css

body{
    margin: 0px;
    padding: 0px;
    font-size:14px;
}

div .ToDoList_page{
    text-align: center;
}
div .ToDoList_container{
    width: 500px;
    height: 500px;
    border: 1px solid black;
    padding-top: 5px;
    margin-right: auto;
    margin-left: auto;

}
 .events_list .event_delete{
    display: none;
    
}
.events_list:hover{
    background-color: #cad5eb;
}
.events_list:hover .event_delete{
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    padding: .3em 1em;
}

.addline{
    text-decoration:line-through;
    color:red;
}

jquery实现TODOList

相关推荐