Доступ CSS к родительскому элементу

Question

Всем привет есть такой html

<label class="quad">
   <input class="quadcheck" name="1" type="checkbox" value="1" checked="">11
</label>

<label class="quad">
   <input class="quadcheck" name="2" type="checkbox" value="1">22
</label>

Один checkbox - checked, Другой нет. Как сделать так, что бы стили label были определенные у checked чекбокса? Через jquery делал вот так

$(document).ready(function(){
    if($('.quadcheck').is(":checked"))
    {
        $('.quadcheck').parent().css("background-color", "#fcfc00");    
    }
});

Но он к обоим почему то дает стили

Answer 1

Вы проверяете есть ли checked, а потом берете не его, а все инпуты, и перекрашиваете. Тут не нужно условие, просто сразу берите checked input

$(document).ready(function(){
        $('input:checked').parent().css("background-color", "#fcfc00");    
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="quad">
   <input class="quadcheck" name="1" type="checkbox" value="1" checked="">11
</label>

<label class="quad">
   <input class="quadcheck" name="2" type="checkbox" value="1">22
</label>

Ну и плюс я полагаю надо не только раз его вызывать, но и на клик еще его привязать.

БЛОГ НА HUSL

Доступ CSS к родительскому элементу

Ответы (1 шт):