Флажок checkbox не стильный при проверке

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 
}