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

Question

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

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

HTML

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

Answer 1

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

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

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

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

在https://codepen.io/anon/pen/qjWopx

更新了代码