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

【问题标题】：JavaScript: I need checkbox input to be checked while clicked on the <p> TagJavaScript：我需要在单击 <p> 标记时检查复选框输入
【发布时间】：2020-10-17 19:28:42
【问题描述】：

我想根据下面的快照代码检查复选框输入，因此当我单击任何待办事项（购买午餐，....等）时，检查复选框输入并在编写以下代码后仅适用于我单击任何段落（待办事项）的第一个元素。

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

【问题讨论】：

感谢您的回复，但我这里根本没有使用谷歌翻译！
您正在使用let checkBoxInput = document.getElementById('checkedInput'); 选择第一个复选框如果您想要每个条目的复选框，请使用 querySelectorAll 而不是 id
谢谢 Sagar 我不知道我是怎么错过的，但现在我感到困惑的是，一旦我点击购买午餐，它就会触发唯一相关的复选框，因为下面的代码会触发所有复选框！跨度>
``` 让段落 =document.querySelectorAll('p');让 checkBoxInput = document.querySelectorAll('input[type=checkbox]'); for(var i=0; i

标签： javascript css node.js checkbox ejs

【解决方案1】：

您可以使用label 代替p，以便浏览器为您完成工作。

您的 EJS 文件如下所示：

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

但是你必须确保在你的应用被渲染之后每个复选框都有一个唯一的 id。

【讨论】：

【解决方案2】：

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

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

【讨论】：