如何使用复选框更改div的内容

Question

我正在尝试使用复选框更改div的内容，但如果内容不在一起（在同一个div中），那么它将无效。

HTML：

for x in range(1,len(S_I)):

CSS：

<div>
   <input type="checkbox" id="check">
   <label for="check">Hello</label>
</div>

<div class="check"></div>

JSFiddle：https://jsfiddle.net/pgkwn4j6/

Answer 1

在你的例子中，正在工作的是使用“input：checked~.check：before”，它选择“check”类div，它位于被检查的输入之后（兄弟元素）。

当您将标签和输入放在不同的div标签中时，您需要选择父母的兄弟姐妹，这是通过CSS无法实现的。

你可以通过Jquery来做到这一点。

CSS: how to select parent's sibling

上面的问题展示了你遇到的非常类似的问题。

Answer 2

它不起作用，因为它不在同一个div中，在css中你不能操纵父元素之外的任何元素。为了能够操作外部元素，必须使用jquery。这里你的JSfiddle正确的链接：

JSFiddle Correct

$(document).ready(function(e) {
  $('input#check').click(function(){
    $('.check').toggleClass('show-content');
  });
});