Как добавить стиль родителю у которого дочерний элемент input:checked?

Question

Есть несколько таких чекбоксов:

<div class="radiobtn_container">
    <input id="greenhouse_width-1" type="radio" name="greenhouse_width" value="0" checked="" type="radio">
    <label for="greenhouse_width-1">Все</label>
</div>
<div class="radiobtn_container">
        <input id="greenhouse_width-2" type="radio" name="greenhouse_width" value="2" checked="" type="radio">
        <label for="greenhouse_width-2">Второй чекбокс</label>
    </div>

При смене чек-бокса можно менять стили таким образом:

.form_radio_btn input[type=radio]:checked + label {
    background: #ffe0a6;
}

Но как поменять стиль родителя radiobtn_container ? Нужно что-бы при смене активного checkbox'a менялся его родитель. jQuery или JS не важно.

Answer 1

let radioSelector = '.radiobtn_container input[type="radio"]';

$(document).on('change', radioSelector, function() {
    $(radioSelector).closest('.radiobtn_container').removeClass('test');
    $(this).closest('.radiobtn_container').addClass('test');
});

// $(radioSelector).eq(0).trigger('click'); --- можно использовать вместо кода ниже, если нужно поставить check на самом первом элементе
$(radioSelector).each(function() {
    if ($(this).prop('checked'))
        $(this).closest('.radiobtn_container').addClass('test');
});

.form_radio_btn input[type=radio]:checked + label {
    background: #ffe0a6;
}

.test {
   border: 5px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>


<div class="radiobtn_container">
    <input id="greenhouse_width-1" type="radio" name="greenhouse_width" value="0" type="radio">
    <label for="greenhouse_width-1">Все</label>
</div>
<div class="radiobtn_container">
        <input id="greenhouse_width-2" type="radio" name="greenhouse_width" value="2" checked="" type="radio">
        <label for="greenhouse_width-2">Второй чекбокс</label>
    </div>

БЛОГ НА HUSL

Как добавить стиль родителю у которого дочерний элемент input:checked?

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