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>
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 =‘<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;
}
时间： 2024-10-15 08:34:11