Доброго времени суток. После добавления элементов при нажатии на кружок слева от введенного элемента не работает галочка чекбокса. И как сделать, чтобы в массив записывалось текущее состояние чекбокса, если выбран: "completed". не выбран: "active". В массив записывается "completed", а при повторном нажатии на чекбокс не переписывает состояние в "active".
Написал комментарий в том месте где заключается ошибка, как мне кажется .
<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>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/application.js"></script>
</body>
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();
});
https://jsfiddle.net/pv2xL2c8/ 