根據使用CSS的複選框顯示/隱藏東西：爲什麼這段代碼不工作？

用戶GGG向我示範瞭如何使用CSS顯示和隱藏東西（它的編號爲here）。根據使用CSS的複選框顯示/隱藏東西：爲什麼這段代碼不工作？

但是，當我試圖適應它到我的網站失敗。這裏的how I´ve modified it。

事情是，每個複選框都有一個CSS ID，每一個檢查時應顯示不同的東西。顯示/隱藏的東西有一個CSS類，並且它不與複選框（example）相鄰。

我該如何適應該代碼？我所嘗試過的東西迄今未奏效......

您的見解將非常感謝！謝謝！！

Rosamunda

來源

2012-03-18 Rosamunda

您的html中存在拼寫錯誤。你不相鄰的意思是什麼？你的國防部有他們相鄰 – Joseph 2012-03-18 01:51:42

對於初學者，你的HTML是無效的。沒有類元素，就像你在這裏完成的那樣''。您的'label'標籤需要'for'屬性或需要環繞輸入元素。您還有'div'和'p'標籤沒有正確關閉。 – j08691 2012-03-18 01:53:28

謝謝，我糾正了錯誤。除了你所說的標籤之外，因爲在我的原始代碼中，沒有屬性，只有一個空的標籤。 – Rosamunda 2012-03-18 01:54:27

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>

來源

2012-03-18 02:01:52 Joseph

感謝您的回答！它的工作原理，但是...我怎麼才能指向那些特定的複選框？我可以使用CSS代碼指向他們嗎？再次感謝！！！！ – Rosamunda 2012-03-18 02:07:06

如果東西不是「相鄰」它不會工作（http://jsfiddle.net/9t59j/5/） – Rosamunda 2012-03-18 02:09:24

更新我的代碼和演示 – Joseph 2012-03-18 02:12:50

它不工作，你必須把每個答案放在div裏關鍵字：

<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>

來源

2013-05-10 09:18:51 Ashraf

根據使用CSS的複選框顯示/隱藏東西：爲什麼這段代碼不工作？

回答

相關問題