0

Всем привет есть такой 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");    
    }
});

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

2
  • через CSS никак. в JS такие селекторы :has() работают, а в CSS нет. hcdev.ru/css/has
    – DiD
    19 окт 2021 в 14:36
  • 1
    Чтобы стили label напрямую зависели от состояния чекбокса, проще всего поставить label следом за чекбоксом и использовать соседний селектор + 19 окт 2021 в 14:40

1 ответ 1

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>

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.