チェックボックスを使用して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

あなたの例では、 "：：確認〜.check前には、入力が" 使用している作業1つのthatsチェックされた入力の直前のクラス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'); 
    }); 
});