Javascript 选中复选框时，Div会更改背景色

我仍在学习jquery以及如何将其组合在一起，但我在购物清单中设置了以下代码：

<div class="AddCheckedWrapper">
    <span>Check to Add to Cart</span>
    <input name="atcuid" type="checkbox">
</div>

选中以添加到购物车

---

我希望它如何工作是使用Jquery，have.AddCheckedWrapper选中复选框并再次单击它取消选中它。然后，如果选中该框，AddCheckedWrapper背景将变为蓝色。如果未选中，则.AddCheckedWrapper背景将变为粉红色。但我遇到的问题是1）我找不到可以使div勾选和取消勾选并改变背景颜色的编码。2）因为它是一个列表，所以有不止一个.AddCheckedWrapper，所以我知道必须以某种方式使用$（这个）。我还有一个数量框，如果您更改了其中的内容，它会选中复选框。因此，如果我更改数量框中的数字，不管它是什么，它都会选中复选框。所以背景色必须根据复选框是否被选中而生效，这就是我遇到的问题

您可以使用引发事件的元素的

this

引用来遍历DOM并找到相关的

.AddCheckedWrapper

，这是正确的。在这种情况下，您可以使用

closest（）

方法查找元素，然后

toggleClass（）

当行中的“数量”字段更改时，您还可以引发“更改上的事件”复选框。试试这个：

$（'.AddCheckedWrapper:checkbox'）.change（函数（）{
$（this）.closest（'.AddCheckedWrapper'）.toggleClass（'checked'，this.checked））；
});
$（'.AddCheckedWrapper.qty'）.change（函数（）{
$（this）.closest（'.AddCheckedWrapper'）.find（':checkbox'）.prop（'checked'，this.value！=0.change（）；
});
.AddCheckedWrapper{
背景颜色：粉红色；
}
.AddCheckedWrapper.checked{
背景颜色：蓝色；
}

选中以添加到购物车
选中以添加到购物车
当数量输入也发生变化时，我想OP需要在复选框上触发
更改
。@xohbrittx如果要增加复选框的命中区域，请添加
标签
元素。我还更新了答案，向您展示了在输入数量>0时如何选中复选框。