複選框標籤不勾選

Question

我試圖創建一個複選框標籤，其中複選框本身被隱藏，但標籤不會因此單擊標籤，即使未顯示覆選框也會勾選。

我想要發生的是當它被選中時，標籤保持紅色，並且爲此我分配了一個用於複選框激活的類，但它不起作用。它可以在懸停時正常​​工作，而不會處於活動狀態。當我點擊它時，複選框會檢查，但標籤不會讀取活動類。

任何想法？

我用下面的HTML：

<div class="gl_delete"> 
    <div class="deleteCB"> 
     <input id="uImgId47" type="checkbox" name="uImgId[]" value="47"></input> 
     <input type="hidden" name="filename[]" value="6_246f0548d62b9b9cc19210389ef09472.jpg"></input> 
     <label onclick="$('#delHolder').show()" for="uImgId47"> X </label> 
    </div> 
</div> 

下面CSS

.deleteCB { 
width: 20px;  
margin: 20px auto; 
} 

.deleteCB label, .deleteCB label:after { 
cursor: pointer; 
position: absolute; 
font-weight:bold; 
font-size:14px; 
content: 'x'; 
line-height:14px; 
position: absolute; 
border-radius:6px; 
padding-left:9px; 
padding-top:3px; 
color:#fff; 
width: 17px; 
height: 21px; 
background: #ccc; 
border:1px solid #ccc; 
top: -1px; 
right: -1px; 
padding-bottom:0; 
} 

.deleteCB label:after { 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
filter: alpha(opacity=0); 
opacity: 0; 
color:#fff; 
background: #cc3333; 
border:1px solid #cc3333; 
} 

.deleteCB label:hover::after { 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; 
filter: alpha(opacity=100); 
opacity: 1; 
} 

.deleteCB input[type=checkbox]:checked + label:after { 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
filter: alpha(opacity=100); 
opacity: 1; 
} 

/* hide checkbox */ 
input[type=checkbox] { 
visibility: hidden; 
} 

Answer 1

的選擇.deleteCB input[type=checkbox]:checked + label:after使用相鄰兄弟選擇+這意味着它的input[type=checkbox]:checked元素之後直接採摘標籤

這不起作用，因爲複選框和標籤元素之間還有另一個input元素 - 所以您的選擇器實際上是：

.deleteCB input[type=checkbox]:checked + input[type=hidden] + label:after 

相反，你也可以使用一般的兄弟組合子，其選擇出現之後的所有元素：

.deleteCB input[type=checkbox]:checked ~ label:after 

這裏是關於同胞選擇多一點信息：CSS Tricks: Child and Sibling Selectors

Answer 2

如果我理解你的權利，我只是建議通過JavaScript添加類到你的標籤，而比單純依靠CSS。你的標籤上已經有一個onclick處理程序，所以我建議在單擊時調用一個函數來處理已有的show()方法，並在你的標籤中添加一個類。

例如，HTML：

<label id="labelImgId47" onclick="onLabelClick()" for="uImgId47">...</label> 

...和JavaScript：

function onLabelClick() { 
    $('#delHolder').show(); 
    $('#labelImgId47').addClass('active'); 
} 

如果用戶可以切換複選框開/關，可以在有條件的邏輯添加到檢查無論是否選中，並且當您需要將該框顯示爲未選中時使用jQuery removeClass()函數。

然後在你的CSS，你可以只用active類樣式您的標籤：

.deleteCB label.active { 
    // Your styles here 
}