Incorrect checkbox status

var tasks = []; var i = 0; function updateTasks() { $('#todo-list').find('li').remove(); $(tasks).each(function(i) { $('#todo-list').append('<li class="completed">\ <div class="todo-task">\ <input class="toggle" type="checkbox" data-id="' + i + '"><label class="text">' + tasks[i].title + '</label>\ <button class="destroy" data-id="' + i + '"></button>\ </div>\ </li>'); }); //Ошибка находиться где-то здесь, не знаю как исправить if (tasks.status === "completed") { $('#todo-list .toggle').prop('checked', true); } else if (tasks.status === "active") { $('#todo-list .toggle').prop('checked', false); } tasksCount(); } function tasksCount() { $('.count').text(tasks.length); if (tasks.length < 1) { $('#footer').hide(); } } /* Добавление задач */ $('#new-todo').keyup(function(event) { if ((event.keyCode === 13)) { if ($(this).val() !== '') { $('#main').show(); $('#footer').show(); var $this = $(this); var newTask = $this.val(); tasks.push({ id: i++, title: newTask, status: 'active' }); // Запись в массив здесь updateTasks(); // Очистка Input $('#new-todo').val(''); } else { return false; } } }); /* Checkbox */ $('#todo-list').on('click', '.toggle', function(e) { var id = parseInt(e.target.dataset.id); tasks[id].status = "completed"; if (!$(this).prop("checked")) { //Кажется, что здесь неправильно написал изменения статуса в массиве tasks[id].status = "active"; } updateTasks(); }); /* Удаление */ $('#todo-list').on('click', 'button.destroy', function(e) { var id = parseInt(e.target.dataset.id); tasks.splice(id, 1); updateTasks(); }); 

 body { font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.4em; background: #f5f5f5; color: #4d4d4d; min-width: 230px; max-width: 550px; margin: 0 auto; font-weight: 300; } #todo_app { display: block; background: #ffffff; margin: 130px 0 40px 0; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); } h1 { display: block; position: absolute; top: -155px; width: 100%; font-size: 100px; font-weight: 100; text-align: center; color: rgba(175, 47, 47, 0.15); } button { margin: 0; padding: 0; border: 0; background: none; font-size: 100%; vertical-align: baseline; font-family: inherit; font-weight: inherit; color: inherit; -webkit-appearance: none; -webkit-font-smoothing: antialiased; } #new-todo { padding: 16px 16px 16px 60px; border: none; background: rgba(0, 0, 0, 0.003); box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03) } input { position: relative; margin: 0; width: 100%; font-size: 24px; font-family: inherit; font-weight: inherit; line-height: 1.4em; opacity: 90; outline: none; color: inherit; padding: 6px; border: 1px solid #999999; box-sizing: border-box; } input[placeholder] { opacity: 0.5; font-style: italic } input::-webkit-input-placeholder { opacity: 0.5; font-style: italic } input::-moz-placeholder { opacity: 0.5; font-style: italic } input:-moz-placeholder { opacity: 0.5; font-style: italic } input:-ms-input-placeholder { opacity: 0.5; font-style: italic } #main { position: relative; z-index: 2; border-top: 1px solid #e6e6e6; } #toggle-all { position: absolute; top: -55px; left: -12px; width: 60px; height: 34px; text-align: center; border: none; transform: rotate(90deg); -webkit-appearance: none; background: none; } #toggle-all::before { content: "❯"; font-size: 22px; color: rgb(230, 230, 230); padding: 10px 27px; } input[type="checkbox"] { position: relative; left: 2px; outline: none; box-sizing: border-box; margin: 3px 3px 3px 4px; background-color: initial; padding: initial; display: inline-block; text-align: start; font: 13px Arial; -webkit-writing-mode: horizontal-tb; } label[for='toggle-all'] { display: none; } label { cursor: default; } #todo-list { margin: 0; padding: 0; list-style: none; } #todo-list li { position: relative; font-size: 24px; border-bottom: 1px solid #ededed; } li { display: list-item; text-align: -webkit-match-parent; } #todo-list li:last-child { border-bottom: none; } #todo-list li .toggle { text-align: center; height: 40px; width: 40px; position: absolute; top: 0; bottom: 0; margin: auto 0; border: none; -webkit-appearance: none; } #todo-list li .toggle:checked:after { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>'); } #todo-list li .toggle:after { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>') } #todo-list li.checked label { color: #d9d9d9; text-decoration: line-through; } #todo-list li label { box-sizing: border-box; white-space: pre-line; word-break: break-all; padding: 15px 60px 15px 15px; margin-left: 45px; display: block; line-height: 1.2; transition: color 0.4s; } #todo-list li:hover .destroy { display: block; } #todo-list li .destroy:hover {} #todo-list li .destroy { display: none; position: absolute; top: 0; right: 10px; bottom: 0; width: 40px; height: 40px; font-size: 30px; color: #cc9a9a; margin: auto 0 11px; transition: color 0.2s ease-out; } #todo-list li .destroy::after { content: "×"; } /* Text footer */ #footer { color: #777777; padding: 10px 15px; height: 20px; text-align: center; border-top: 1px solid #e6e6e6; font-size: 14px; } #footer:before { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 50px; overflow: hidden; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2); } .todo-count { float: left; text-align: left; } .todo-count strong { font-weight: 300; } #filters { margin: 0; padding: 0; list-style: none; position: absolute; right: 0; left: 0; } ul, menu, dir { display: block; list-style-type: disc; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0; -webkit-margin-end: 0; -webkit-padding-start: 40px; } #filters li { display: inline; } li { display: list-item; text-align: -webkit-match-parent; } #filters li a.active { border-color: rgba(175, 47, 47, 0.2); } #filters li a:active { border-color: rgba(175, 47, 47, 0.2); } #filters li a:hover { border-color: rgba(175, 47, 47, 0.1); } #filters li a { color: inherit; margin: 3px; padding: 3px 7px; text-decoration: none; border: 1px solid transparent; border-radius: 3px; } #clear-completed { position: relative; float: right; line-height: 20px; text-decoration: none; cursor: pointer; outline: none; } /* FOOTER */ footer { margin: auto 0; color: #bfbfbf; font-size: 10px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); text-align: center; } footer p { line-height: 1; } footer a { color: inherit; text-decoration: none; font-weight: 400; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <body> <section id="todo_app"> <header> <input id="new-todo" autofocus> </header> <section id="main" style="display: none;"> <input id="toggle-all" type="checkbox"> <label for="toggle-all">Mark all as complete</label> <ul id="todo-list"> <!-- li class="completed"> <div class="task"> <label> <input class="toggle" type="checkbox"> </label> <button class="destroy"></button> </div> </li --> </ul> </section> <footer id="footer" style="display: none;"> <span class="todo-count"> <strong class="count"> </strong> items left </span> <ul id="filters"> <li> <a href="#" class="show-all-tasks">All</a> </li> <li> <a href="#" class="show-active-tasks">Active</a> </li> <li> <a href="#" class="show-completed-tasks">Completed</a> </li> </ul> <button id="clear-completed" style="display: none;">Clear completed</button> </footer> </section> <footer> </footer> <script src="js/jquery-3.1.1.min.js"></script> <script src="js/application.js"></script> </body>