JavaScript动态生成复选框均控制首个元素问题排查

所有复选框点击都只控制第一个元素的核心原因是HTML元素ID全局重复：

• 你在appendToggle函数中给每一个动态生成的复选框都设置了固定id toggleStatus，对应label的for属性也全部写死为toggleStatus
• 浏览器规范中id是全局唯一标识符，for属性匹配元素时永远会定位到DOM中第一个匹配对应id的节点，所以无论点击哪个复选框的关联label，触发的都是第一个生成的复选框
• 你之前给复选框加专属类名的操作没有命中问题根源，自然无法解决异常
• 额外逻辑bug：displayBookCards中遍历整个myLibrary数组给当前卡片的文本节点赋值，会导致所有渲染的卡片最终都显示数组最后一本书的信息。

• 利用传入的index参数为每个复选框生成全局唯一的id
• 同步将对应label的for属性绑定到当前复选框的唯一id上
• 修正卡片内容的赋值逻辑，直接取当前索引对应的书籍数据，不要遍历整个书籍数组

修正后的appendToggle方法 #

let appendToggle= function (bookCard,index) {
  let toggleButtonContainer=document.createElement("div")
  let toggleButton=document.createElement("input")
  let toggleLabel=document.createElement('label')
  toggleButtonContainer.setAttribute("class", "toggleButtonContainer")
  toggleButton.setAttribute("value", "notRead")
  toggleButton.setAttribute("type","checkbox")
  toggleButton.setAttribute("class", "toggle")
  // 生成当前复选框专属唯一ID
  const uniqueToggleId = `toggleStatus-${index}`
  toggleButton.setAttribute("name", uniqueToggleId)
  toggleButton.setAttribute("id", uniqueToggleId)
  // label绑定当前复选框的唯一ID
  toggleLabel.setAttribute("for", uniqueToggleId)
  toggleButtonContainer.appendChild(toggleButton)
  toggleButtonContainer.appendChild(toggleLabel)
  bookCard.appendChild(toggleButtonContainer)
  toggleButton.classList.add(index)
}

修正后的卡片内容赋值逻辑 #

将displayBookCards中原本遍历myLibrary的代码块替换为以下内容，避免所有卡片显示重复内容：

// 直接取当前索引对应的书籍数据渲染，不需要遍历整个数组
const currentBook = myLibrary[index]
titleToDisplay.textContent = currentBook.bookName
authorToDisplay.textContent= `By: ${currentBook.bookAuthor}`;
pagesToDisplay.textContent=`Pages: ${currentBook.bookPages}`;
hasReadToDisplay.textContent=`Book Read: ${currentBook.bookRead}`;

内容的提问来源于stack exchange，提问作者Miguel Gil