samedi 17 octobre 2020

JavaScript: I need checkbox input to be checked while clicked on the Tag

I want to make the checkbox inout be checked as per the below snapshot code so when I click of any of the Todo Item (Buy Lunch,....etc.) the checkbox input be checked and after writing below code it is only applied on the first element only whatever I clicked any paragraph (Todo item).

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

enter image description here

So how to click each todo list item not to click on checkbox itself and it being fired and make this like image not

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



Aucun commentaire:

Enregistrer un commentaire