I need to modify the checkbox input so that when I click on any Todo Item, the checkbox is checked. However, after implementing the code below, it only works for the first element clicked. How can I make it work for each individual todo list item without clicking directly on the checkbox itself?
// Clicking Todo Item to fire checked Input
let paragraphs =document.querySelectorAll('p');
let checkBoxInput = document.getElementById('checkedInput');
for(var i=0; i < paragraphs.length; i++){
paragraphs[i].addEventListener('click', function () {
this.style.color = "#2a6850";
checkBoxInput.checked = true;
}, false);
}
https://i.sstatic.net/UO7hd.png
How can I achieve the desired functionality as shown in the image, where clicking on a todo list item checks the corresponding checkbox and applies a line-through style to the text?
EJS File:
<div class="item">
<input type="checkbox" name="" id="checkedInput">
<p>
<%= newItem %>
</p>
</div>
CSS
input:checked + p {
text-decoration: line-through;
text-decoration-color: #2da883;
}