Вот несколько jQuery для публикации на php-страницу и возврата html:
$('form').submit(function() {
$.post('tip.php', function(html) {
// do what you need in your success callback
}
return false;
});
В вашем коде есть небольшая логическая ошибка:
document.getElementById(('filterTodo').checked))
Это в основном означает: найти элемент с идентификатором значения свойства selected строки filterTodo. Так как строки не имеют свойства selected, элемент не найден, а для isChecked никогда не устанавливается значение true.
Попробуйте сначала получить элемент, затем запросите проверенный атрибут:
document.getElementById( 'filterTodo' ).checked;
Затем я получу true / false, в зависимости от того, установлен флажок или нет:
[ 116]
var todos = [{
text: 'Order airline tickets',
completed: false
},{
text: 'Vaccine appointment',
completed: true
}, {
text: 'Order Visa',
completed: true
}, {
text: 'Book hotell',
completed: false
}, {
text: 'Book taxi to airport',
completed: true
}];
showTodos(todos);
function addTodo(add_todo) {
var p = document.createElement('p')
p.textContent = add_todo.text
document.querySelector('body').appendChild(p)
var checkBox = document.createElement("input")
var label = document.createElement("label")
checkBox.type = "checkbox"
checkBox.value = addTodo.completed
document.querySelector('body').appendChild(checkBox)
document.querySelector('body').appendChild(label)
label.appendChild(document.createTextNode(add_todo.completed))
}
function showTodos(show_todos) {
//function to show the whole object
show_todos.forEach(function (todo) {
addTodo(todo);
})
}
function validate() {
let isChecked = false;
if ( document.getElementById( 'filterTodo' ).checked ) {
isChecked = true;
console.log(isChecked);
} else {
isChecked = false;
console.log(isChecked);
}
}
<label style="font: bold 1.5em courier !important">
<input type="checkbox" id="filterTodo" onchange="validate()">Hide completed
</label>
Теперь вам нужно только добавить логику .filter () к массиву задач, чтобы вы получили новый массив только с незавершенными todos, затем очистите тело ранее визуализированных todos и, наконец, измените массив, полученный фильтром.
РЕДАКТИРОВАТЬ:
Неопределенные значения внутри меток вызваны этим:
label.appendChild(document.createTextNode(todos.completed))
Тодос - это весь массив, а не элемент, поэтому вам нужно:
[115 ]если вам нужно, чтобы значение true / false было на этикетке