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

Posted 2023-03-06

【中文标题】如何使用复选框更改 div 的内容

【英文标题】：How can I change the content of a div using check boxes

【发布时间】：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/

【参考方案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');
  );
);