JavaScript：我需要在单击 <p> 标签时检查复选框输入

Question

我想按照下面的快照代码检查复选框输入，所以当我点击任何待办事项（购买午餐等）时，检查复选框输入并在下面写完之后代码它只应用于第一个元素，无论我点击任何段落（Todo 项目）。

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

那么如何单击每个待办事项列表项而不是单击复选框本身并触发它并使其像图像一样不

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

Answer 1

我已经解决了它使用我创建的以下代码...谢谢大家:)

let paragraphs =document.querySelectorAll('p'); 
let checkBoxInput = document.querySelectorAll('input[type=checkbox]');
        
          for(var i=0; i < paragraphs.length; i++){
            paragraphs[i].addEventListener('click', function () {
           
                this.style.color = "rgb(228 233 253)";
                this.style.borderRadius = "10%";
                this.style.backgroundColor = "#0c0b07";
                this.previousElementSibling.checked = true;
        
              }, false);
             }

Answer 2

您可以使用 label 而不是 p，这样浏览器就会为您完成工作。

您的 EJS 文件看起来像这样：

<div class="item">
    <input type="checkbox" name="checkedInput" id="checkedInput">
    <label for="checkedInput">
        <%= newItem %>
    </label>
</div>

但您必须确保在呈现您的应用程序后，每个复选框都有一个唯一的 ID。

JavaScript：我需要在单击 <p> 标签时检查复选框输入

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

javascript

css

checkbox

ejs

node.js