Javascript 为每个元素排列设置JQuery操作

我有一个复选框列表

Object{0:div.checkbox-toggle，1:div.checkbox-toggle，2:div.checkbox-toggle，length:3，prevObject:{…}

和 每个元素都是

…

在js文件中

...
var checkbox = $(".checkbox-toggle")

var ch = true
checkbox.change(function(){
  if (ch) {
    ch = false
    checkbox.css("background", "red")
  } else {
    ch = true
    checkbox.css("background", "green")

  }
})

我只想更改我单击的复选框的颜色，但现在它会更改所有复选框的颜色。 我想知道如何为每个独立的复选框设置操作。

---

我还尝试使用forloop设置操作，但无法获得我想要的内容。

您可以使用类切换功能在选中时切换复选框背景。在下面添加了css样式的情况下，当选中复选框时，它的背景将为绿色，如果不选中则为红色

我将代码段包装在IIFE中，以避免任何潜在的名称空间损坏

（不过是普通的解决方案）

将此添加到

.checkbox切换：不（.isChecked）{
背景：红色；
}
.checkbox-toggle.isChecked{
背景：绿色；
}

在

空函数（）{
常量复选框=document.getElementsByClassName（“.checkbox切换”）；
for（复选框的常量复选框）{
void checkbox.classList.add（'isChecked'）；
checkbox.onclick=check；
}
功能检查（e）{
const currentCheckbox=e.target | | e.src元素；
void currentCheckbox.classList.toggle（'isChecked'）；
};
}();

而不是

checkbox.css（）

使用

$（this.css（）