jquery实现TODOList

html

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ToDoListtitle>
    <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>

js

(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 ='×';
           var i=0;
            // 增加事件列表
                 $("#ToDoList_add").bind("keypress",function(event){
                      if(event.keyCode===13){
                        i++;
                        var events_list = '
'; var checkboxHtml=''; 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;
}

 

转载于:https://www.cnblogs.com/alisayuan/p/5239455.html

你可能感兴趣的:(javascript)