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;
}

这是一个小提琴：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;
}

小提琴：Demo

未来帮助，通过验证程序运行您的html以查找明显错误，validator

复选框可在选择时更改div颜色

1 个答案: