Not able to mark checkboxes checked dynamically through javascript

Question

I am making a todo app using javascript. I am dynamically creating a template for tasks that i will be entering in a input box. On clicking add task template is created dynamically and that template contains the name of task and one checkbox. I tried changing the checked property to true. In console also its showing true but in web browser checkbox is not checked

Here is my code for dynamically adding task

function updateLists(tasks){
    const parent = document.createElement('div');
    tasks.forEach((task,index)=>{
        const divP = document.createElement('div');
        const div = document.createElement('div');
        div.innerText = task.task;
        div.style.textDecoration = task.completed ? 'line-through' : 'none';
        divP.className = 'taskdiv';
        divP.id = index;
        const span = document.createElement('img');
        span.src = 'trash.svg';
        span.className = 'taskSpan'
        const span2 = document.createElement('span');
        const inputEl = document.createElement('input');
        inputEl.type = 'checkbox';
        inputEl.className = 'checkbox';
        console.log(task.completed);
        inputEl.checked = true;
        span2.appendChild(inputEl);
        span2.className = 'checkSpan'
        divP.appendChild(span2);
        span.className = 'taskSpan'
        divP.append(div);
        divP.append(span);
        parent.prepend(divP);
    })
    parentDiv.innerHTML = parent.innerHTML;
}

Have you tried appending the checkbox and only after marking it as checked? — SpencerLS, Apr 22 '20 at 15:03

jeprubio · Answer 1 · 2020-04-22T15:49:20.750

4

You seem to be looking for the defaultChecked property:

var parentDiv = document.getElementById('tasks');

updateLists([{task: 'pending', completed: false}, {task: 'completed', completed: true}]);

function updateLists(tasks){
    const parent = document.createElement('div');
    tasks.forEach((task,index)=>{
        const divP = document.createElement('div');
        const div = document.createElement('div');
        div.innerText = task.task;
        div.style.textDecoration = task.completed ? 'line-through' : 'none';
        divP.className = 'taskdiv';
        divP.id = index;
        const span = document.createElement('img');
        span.src = 'https://via.placeholder.com/15';
        span.className = 'taskSpan'
        const span2 = document.createElement('span');
        const inputEl = document.createElement('input');
        inputEl.type = 'checkbox';
        inputEl.className = 'checkbox';
        console.log(task.completed);
        inputEl.checked = task.completed;
        inputEl.defaultChecked = task.completed;
        span2.appendChild(inputEl);
        span2.className = 'checkSpan'
        divP.appendChild(span2);
        span.className = 'taskSpan'
        divP.append(div);
        divP.append(span);
        parent.prepend(divP);
    })
    parentDiv.innerHTML = parent.innerHTML;
}

<div id="tasks">tasks</div>

Or use DOM functions like appendChild() to preserve the child nodes instead of innerHTML.

edited Apr 22 '20 at 15:49

answered Apr 22 '20 at 15:12

jeprubio

17,312
5
45
56

i found the strange behaviour if i am writing parentDiv.appendChild(parent) then checkboxes are perfectly working but if i write parentDiv.innerHTML = parent.innerHTML not working – Yatharth Verma Apr 22 '20 at 15:15
By assigning the `defaultChecked` it works in both cases, check it – jeprubio Apr 22 '20 at 15:20
ya its working bro but another strange thing happening because of using innerhtml that if i try to add any eventlistener lets say i add eventlistener to my span2 in above code its not working but with appendChild its working. Do you know the reason – Yatharth Verma Apr 22 '20 at 15:29
That's because appendChild is a DOM function and preserves the child nodes. There are some answers of this here https://stackoverflow.com/questions/595808/is-it-possible-to-append-to-innerhtml-without-destroying-descendants-event-list – jeprubio Apr 22 '20 at 15:31
I'm glad I could help – jeprubio Apr 22 '20 at 15:50
Can you answer one more thing how can I make listener work with inner html or is there any DOM function that can append the div inside parent by overwriting the parent div – Yatharth Verma Apr 22 '20 at 15:56
1

With DOM functions you can delete all the children of an element: `while (element.firstChild) { element.removeChild(element.firstChild); }` and then use `element.appendChild()` for example – jeprubio Apr 22 '20 at 16:00
Thanku I will try it – Yatharth Verma Apr 22 '20 at 16:03

score 0 · Answer 2 · answered Apr 22 '20 at 15:20

once you append, grab the element and set the checkbox;

function updateLists(){
    const parent = document.createElement('div');
   
        const divP = document.createElement('div');
        const div = document.createElement('div');
        div.innerText = "hi there";
        div.style.textDecoration = 'line-through' ;
        divP.className = 'taskdiv';
        divP.id = "aa";
        
        const span = document.createElement('img');
        span.src = 'trash.svg';
        span.className = 'taskSpan'
        const span2 = document.createElement('span');
        const inputEl = document.createElement('input');
        inputEl.type = 'checkbox';
        inputEl.className = 'checkbox';
       
        inputEl.id = "bb";
        span2.appendChild(inputEl);
        span2.className = 'checkSpan';
        divP.appendChild(span2);
        span.className = 'taskSpan';
        divP.append(div);
        divP.append(span);
        parent.prepend(divP);
        
        var parentDiv=document.getElementById("xx");
        console.log(parentDiv);
    
    parentDiv.innerHTML = parent.innerHTML;
    console.log(inputEl );
    document.getElementById('bb').checked=true;
}

updateLists()

<div id="xx">x</div>

Not able to mark checkboxes checked dynamically through javascript

2 Answers2