mardi 18 décembre 2018

Storing a checkbox value in local storage

Im working on a checklist chrome app for myself and would love your help. Basically, I cant figure out how to save a checkbox status. If I check a box and refresh the page, I would like it to stay checked. But I cant seem to code that. Any ideas how to do that? Thank you!!

function get_todos() {
    var todos = new Array;
    var todos_str = localStorage.getItem('todo');
    if (todos_str !== null) {
        todos = JSON.parse(todos_str); 
    }
    return todos;
}
 
function add() {
    var task = document.getElementById('task').value;
 

    var todos = get_todos();
        
    todos.push(task);
    localStorage.setItem('todo', JSON.stringify(todos));
 
    show();
 
    return false;
}
 
function remove() {
    var id = this.getAttribute('id');
    var todos = get_todos();
    todos.splice(id, 1);
    localStorage.setItem('todo', JSON.stringify(todos));
 
    show();
 
    return false;
}
 
function show() {
    var todos = get_todos();
 
    var html = '<ul>';
    for(var i=0; i<todos.length; i++) {
        html += '<li>' + '<input type="checkbox" id="checkbox">' + todos[i] + '<button class="remove" id="' + i  + '">delete</button></li>' ;
    
        
        };
    html += '</ul>';
        
 
    document.getElementById('todos').innerHTML = html;
        
        
        
        
    var buttons = document.getElementsByClassName('remove');
    for (var i=0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', remove);
    };
}



document.getElementById('add').addEventListener('click', add);
show();



Aucun commentaire:

Enregistrer un commentaire