当复选框在标签内移动时，与复选框关联的标签不起作用答案

【问题标题】：Label associated with checkbox does not work when checkbox moved inside label当复选框在标签内移动时，与复选框关联的标签不起作用
【发布时间】：2017-11-03 06:14:00
【问题描述】：

MDN - Attributes 说：

<label> 可以通过将控件元素放在元素内或使用for 属性与控件相关联。

我正在查看Animated Checkbox with CSS3 Powered Animation 的演示。基于Possible to associate label with checkbox without using "for=id"?，我厌倦了将其作为带有输入元素的标签。

当我进行更改时，复选框不起作用。为什么在此更改后无法正常工作以及如何解决此问题？

工作中：https://codepen.io/anon/pen/LLPQoy

不工作：https://codepen.io/anon/pen/qjWodj

注意：我不能在标签中使用“For”属性，因为输入元素将动态添加到我的实际 HTML 页面中。

HTML

<div class="myDiv" style="padding:20px 0 20px 20px;">
<input type="checkbox" id="cbtest" />
<label for="cbtest" class="check-box"></label> 
</div>

【问题讨论】：

您的 css 规则在不工作时未更新。标签是 .checkbox 的父级。但是您的目标是这样的 input[type=checkbox]:checked + .check-box

标签： html css

【解决方案1】：

复选框工作得很好，你可以看到它是否可见（它目前有display:none）。

问题是您的 CSS 期望它在外部，因此它可以在使用 input[type=checkbox]:checked + .check-box 时设置 .check-box 元素的样式。

要解决此问题，您应该在复选框后添加另一个元素，并将 check-box 类添加到该复选框而不是标签。

<label>
  <input type="checkbox" />
  <span class="check-box">
</label>

在https://codepen.io/anon/pen/qjWopx更新了codepen

【讨论】：

有趣。有用。我试图了解添加跨度来解决此问题的逻辑。是的，我看到它现在符合 CSS 期望。我无法理解的是 for 属性如何满足相同的期望。
@Lijo 不是for。在 css 中，input[type=checkbox]:checked + .check-box 意味着 .check-box 必须是 :checked 输入之后的下一个元素，这就是您的 html 在该示例中的样子（label 和 .check-box 类是输入的下一个元素）。在更新后的代码中，我们只是通过添加另一个要设置样式的元素而不是标签来修复这种不匹配。