CSSを使用したチェックボックスに従ったものを表示/非表示：なぜこのコードはうまくいかないのですか？

Question

ユーザーGGGは、CSSを使って情報を表示したり非表示にする方法の例を教えてくれています（それはhereです）。

しかし私は自分のサイトにそれを適用しようとしたときに失敗しました。ここにはhow I´ve modified itがあります。

各チェックボックスにはcss IDがあり、チェックするとそれぞれが異なるものを表示する必要があります。 表示/非表示の項目にはcssクラスがあり、チェックボックスの隣にははありません。（example）です。

どのようにコードを修正できますか？私が試したことは、今まで働いていませんでした...

あなたの洞察は非常に高く評価されます！ありがとう!!

Rosamunda

Answer 1

DEMO代わりに隣接兄弟セレクタの一般兄弟セレクターを使用するように更新

CSS：

/*styled relative to the label*/ 
label {display:block;} 
label ~ input[type="checkbox"] ~ div {display:none; margin-left:1em;} 
label ~ input[type="checkbox"]:checked ~ div {display:inline;}​ 

HTML：それはあなた、を

<label>Box 1:</label> 
<input class="form-checkbox" id="edit-field-tipos-unidades-disponible-value-131" type="checkbox"> 
<div class="tipo-uf-131">Box 1 is checked.</div> 
<br> 

<label>Box 2:</label> 
<input class="form-checkbox" id="edit-field-tipos-unidades-disponible-value-134" type="checkbox"> 
<div class="tipo-uf-134">Box 2 is checked.</div> 
<br> 

<label>Box 3:</label> 
<input class="form-checkbox" id="edit-field-tipos-unidades-disponible-value-130" type="checkbox"> 
<div class="tipo-uf-130">Box 3 is checked.</div>​ 

Answer 2

が動作していません各回答を部門に入れなければならない liこの場合、

<style> 
label {display:block;} 
label ~ input[type="checkbox"] ~ div {display:none; margin-left:1em;} 
label ~ input[type="checkbox"]:checked ~ div {display:inline;}​ 
</style> 
<div> 
<label>Box 1:</label> 
<input class="form-checkbox" type="checkbox"> 
<div>Box 1 is checked.</div> 
</div> 
<div> 
<label>Box 2:</label> 
<input class="form-checkbox" type="checkbox"> 
<div>Box 2 is checked.</div> 
</div> 
<div> 
<label>Box 3:</label> 
<input class="form-checkbox" type="checkbox"> 
<div>Box 3 is checked.</div>​ 
</div>