Vue.js 2.0中复选框选中时如何为父元素添加class？

架构老林

2026-10-4

问题解答

可行性说明

可以实现，你要的效果不需要额外自定义事件或者调用ref，基于现有v-model绑定逻辑就能直接完成。

具体实现方法

方案1：Vue动态类绑定（兼容性最好）

你用v-model把复选框绑定到了checkedItems数组，所有被选中的复选框的value都会自动被收录到这个数组里，所以只需要判断当前遍历项的value是否在数组内即可，修改后的代码如下：

<div
   class="checkbox-container"
   v-for="item in items"
   :key="item.id"
   :class="{'checked': checkedItems.includes(item.value)}"
>
   <input type="checkbox" :id="item.id" :value="item.value" v-model="checkedItems">
   <label :for="item.id">{{ item.text }}</label>
</div>

方案2：纯CSS实现（无需修改JS逻辑）

如果你的项目不需要兼容过低版本浏览器，可以直接用CSS的:has伪类实现，不需要修改Vue模板的绑定逻辑：

/* 直接把你原本要写在.checked类里的样式放在这里即可 */
.checkbox-container:has(input[type="checkbox"]:checked) {
  /* 示例样式 */
  background: #e8f3ff;
  border-color: #409eff;
}