jquery - 用于在选择时更改 div 颜色的复选框

Question

我想在选择时添加一个简单的勾选购物元素，并更改背景颜色。当我单击任何选项时，它只会选择第一个复选框并且不会更改颜色。

为什么会发生这种情况以及如何解决这个问题？

(".check").on("change", function() {
    $(this).parent().toggleClass("checked", this.checked);
});

.item.checked{
  background: #CCC;
}

<label for="add_check">
    <div class="item">
       <input type="checkbox" id="add_check" class="check" style="float: left;" />
       <div style="display: inline-block">
           <a href="">Milk</a>
       </div>
    </div>
</label>

完整 example here向你展示我在做什么。提前谢谢你的帮助。

Answer 1

重要您是否尝试使用 jQuery 或 css 执行此操作？这是一个纯 css 解决方案。

你的选择器应该是这样的:

.check:checked ~ .content {
  background: #CCC;
}

这是一个 fiddle :Demo

如果你想选择整个区域，那么你可以这样做，(重要:输入必须在受影响的内容之前)

html:

<label for="milk">
    <input type="checkbox" id="milk" class="check" style="float: left;" />
    <div class="item">
       <div class="content" style="display: inline-block">
           <a href="">Milk</a>
       </div>
    </div>
</label>

CSS:

.check:checked ~ .item {
  background: #CCC;
}

fiddle :Demo

future 的帮助，通过验证器运行您的 html 以发现明显的错误，validator