如何隱藏使用css檢查的無線電標籤

<label class="duck duck1"> 
    <input type="checkbox"> 
</label>

我想，如果我在複選框，標籤和複選框，單擊都應該是display:none沒有jQuery的。

我試過了。

.duck input[type=checkbox]:checked + label.checkbox {display: none;}

2014-10-10 Mukul Kant

它不工作，你認爲它的工作方式。使用css，你只能選擇一個你點擊之後的元素，而不是之前，而不是父級。請考慮使用JavaScript的目的。 – Banana 2014-10-10 07:20:24

你的意思是它不可能與CSS。 – 2014-10-10 07:29:04

這是可能的，如果你改變你的結構像這樣'' – 2014-10-10 07:41:31

遺憾的是，正如我以前說過：使用CSS，你只能選擇你點擊，而不是之前，而不是父母的一個後到來的元素。

但是，您可以解決此問題。看看下面的代碼：如果你重建你的HTML有複選框後的標籤，動畫類添加到複選框爲好，與標籤對齊

：

<div class="main"> 
    <input type="checkbox" class="duck duck1 cb_1"></input> 
    <label class="duck duck1"></label> 
</div>

，你將能夠通過以下方式來選擇兩個：

input[type=checkbox].cb_1:checked, 
input[type=checkbox].cb_1:checked + label { 
    display: none; 
}

這裏是一個固定Fiddle

（該.cb_1類只是針對z-索引，使複選框出現拉布勒以上，並避免在頁面上隱藏不相關的標籤其他複選框）

UPDATE：

另一個解決辦法是創建使用:after僞選擇器的標籤（或鴨圖像精靈）：

.duck:after{ 
    content:''; 
    width: 50px; 
    height: 50px; 
    position: absolute; 
}

這裏是與:after選擇器的示例：Duck Fiddle

2014-10-10 08:13:46 Banana

回答