Javascript 选中时将类添加到特定复选框

我有一个foreach echo，它在我的网站上显示一个项目列表，我想制作一个系统来添加一个绿色背景（选中复选框时），并在不再选中复选框时删除该复选框

echo'；
foreach（$queryas$row）{
回声'
接受


减少
';
}
回声'
';

对于每个复选框，我想添加类

.greenbox{
背景颜色：绿色；
}

当它被选中或取消选中时，我希望它删除该类

谢谢大家!

下面是ContainerPen和CheckmarkPen类的CSS

    .containerPen {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.containerPen input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}


.checkmarkPen {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}


.containerPen:hover input ~ .checkmarkPen {
  background-color: #00ff00;
}


.containerPen input:checked ~ .checkmarkPen {
  background-color: #00ff00;

}


.checkmarkPen:after {
  content: "";
  position: absolute;
  display: none;
}


.containerPen input:checked ~ .checkmarkPen:after {
  display: block;
}


.containerPen .checkmarkPen:after {
  left: 9px;
  top: 5px;
  width: 7px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

---

$onload=您可以在将id传递给函数的两个复选框上添加eventListener或onclick事件

然后，您可以使用JavaScript的内置类列表属性来添加和删除类


const addClass=（id）=>{
让checkbox=document.querySelector（`${id}`）；
checkbox.classList.toggle（'greenbox'）；
}
.greenbox{
背景颜色：绿色；
}
作为替代方法

根据您支持的浏览器的不同，您可以通过CSS
：checked
伪类选择器简单地执行您试图执行的操作

您可以仔细阅读它并查看兼容性

用法示例如下：

input:checked
{
    background-color: green;
}

或者类似的

label input:checked
{
    background-color: green;
}

如果您只想让它影响标签内的输入。请注意，此选择器也将应用于单选按钮或选项中的选项。
它们都不起作用。。。我忘了为标签&span添加CSS。我编辑了主要帖子。我真的很想用CSS来解决这个问题，但就我所尝试的而言，它并没有起作用CI将您在帖子中提供的HTML和CSS复制到了JSFIDLE，当单击“接受”复选框时，它看起来是绿色的。你的预期结果是什么？我需要标签变成绿色，而不是复选框。我在主帖中添加了CSS，所以你希望复选框的父元素有绿色背景，而不是复选框本身？那样的话。。。当前的HTML设置无法通过CSS实现，因为您无法通过CSS选择器选择父元素或上一个元素。有关更多信息，请参阅第页。看起来JavaScript是目前您唯一的解决方案。您好！我尝试了这个，它将绿框添加到输入中，我需要将它添加到标签中。我试图将onclick函数移动到标签上，但没有任何结果……在标签使用“checkbox.parentElement.classList.toggle（'greenbox'）”的情况下，这将在输入的父元素上应用该类，在您的情况下，它是LabelWorking，但不正确。当我选中任何复选框时，它只选择第一个复选框，这可能是因为您可能正在重用元素
id
s。它们应该是独一无二的。我试过使用这个，但我不知道如何使用$onload=是的，herdoc很挑剔。我用一条关于用法的注释更新了我的答案。你只需要做一个小小的调整
label input:checked
{
    background-color: green;
}