CODEWITHSUNDEEP
javascripthtmlcss
Yatharth Verma
Yatharth Verma

Reputation: 39

Not able to mark checkboxes checked dynamically through javascript

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;
}

Upvotes: 3

Views: 82

Answers (2)

jeprubio
jeprubio

Reputation: 18002

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.

Upvotes: 4

DCR
DCR

Reputation: 15665

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>

Upvotes: 0

Related Questions