Javascript 有什么我遗漏的吗？

我创建了一个复选框并应用这些属性

let box = document.createElement('input');
box.setAttribute("type","checkbox");
box.setAttribute("id","box");
box.setAttribute("onclick","checkBox(this)");

这就是函数

function checkBox(para2){
    let condition = box.checked;
    if (condition === true) {
        para2.parentNode.style.opacity = '0.5'
        para2.parentNode.style.textDecoration = "line-through"

    }
    if (condition === false) {
        para2.parentNode.style.opacity = "1";
        para2.parentNode.style.textDecoration = "none";
    }
}

---

当我点击第一个复选框时，样式就起作用了。但当我单击其他子项时，它不起作用。

在您的复选框函数中

 let condition = box.checked;

此行专门检查复选框“box”是否已选中。由于您有多个复选框，我相信您可能有第2框、第3框等

作为一种解决方案，您可以在复选框中引入“name”属性，并使用查询选择器来标识要选中的复选框

 let condition = document.querySelectorAll('input[name="color"]');
    condition.forEach((cb) => {
        if (cb.checked === true) {
          // your code
        } else {
          // your code
        }
        
    });

---

注意：可能还有许多其他可能的方法可以做到这一点。这是我现在想到的一个

到底什么不起作用？样式在其他子元素上不起作用您可以提供带有子元素的代码吗？这是我的HTML代码

能否请您在问题中添加代码，使其更易于理解？这是文字，但问题尚未解决，