如何使用複選框更改div的內容

Question

我想要有一個複選框來更改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/

Answer 1

在你的榜樣那個那是用 「輸入：檢查〜。查：前」 工作，其選擇「檢查「在被檢查的輸入（兄弟元素）之後右上的class 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'); 
    }); 
});