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

【问题标题】：How can I change the content of a div using check boxes如何使用复选框更改 div 的内容
【发布时间】：2017-03-21 12:59:27
【问题描述】：

我试图让一个复选框更改 div 的内容，但如果内容不在一起（在同一个 div 中），那么它将不起作用。

HTML：

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

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

CSS：

.check:before {
   display: block;
   width: 100px;
   height: 100px;
   background: red;
   content:'';
}

input:checked ~ .check:before {
   content:'Content';
}

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

【问题讨论】：

标签： html css checkbox

【解决方案1】：

在您的示例中，一个正在工作的方法是使用“input:checked ~ .check:before”，它选择在被检查的输入（兄弟元素）之后的“check”类 div。

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

您可以通过 Jquery 来完成。

CSS: how to select parent's sibling

上述问题展示了您遇到的非常相似的问题。

【讨论】：

【解决方案2】：

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

JSFiddle Correct

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

【讨论】：