Как задать обводку label-у при checked input-е?

Question

[steef08]

Доброй всем ночи, суть проблемы — сайт на WordPress, стоит Elementor Pro, в одной секции созданы две колонки.
в левой колонке находятся label-ы c оформлением, в правой колонке находятся input-ы и картинка которая меняется в зависимости от нажатии на label-ы.
input-ы заданы следующим образом —

<div class='box_input'>
    <input type='radio' name='col' id='white'>
    <input type='radio' name='col' id='black'>
</div>

Label-ы заданы вот так

<div class="labelbox">
    <label class='black' for='black'></label>
    <label class='white' for='white'></label>
</div>

У Label два состояния:
1)

label.black:before {
    content:'';
    display: block;
    border-radius: 50%;
    border: 1px solid #0070c9;
    height: 39px;
    width: 39px;
    transform: translate(-5.3px, -10.3px);
    opacity: 0;
}

2) Когда input зачекан то он должен выглядеть вот так:

label.black:before {
    opacity: 1;
}

Код который бы отслеживал чекед на input-е и менял состояние label-а следующий:

input#black:checked + label:before {
    opacity: 1;
}

Но он не работает...
_____________________
И этот тоже

input#black:checked ~ label:before {
    opacity: 1;
}

И этот

input#black:checked + * label:before {
    opacity: 1;
}

И даже этот

input#black:checked ~ * label:before {
    opacity: 1;
}

Прощу помощи, что не так? Заранее большая благодарность и жирный + в карму

Comments

[Антон Литвиненко]

Только скриптом в этом случае

[steef08]

Антон Литвиненко, как это реализовать скриптом? Если не трудно сможете написать код?

Answer 1

[Антон Литвиненко]

Первое что в голову пришло. Возможно более элегантно сделать
https://jsfiddle.net/v78hn9pb/

Comments

[steef08]

Антон Литвиненко Заменил $ на jQuery но скрипт не пашет на wordpress, в чем проблема?

[Антон Литвиненко]

steef08, а что говорит? Вы же заметили что я не ваши стили использую вдруг что?

[steef08]

Антон Литвиненко, он просто не работает. Стили свои подставил.

[Антон Литвиненко]

steef08, попробуйте так

jQuery(function($){
  $('.box_input input').on('change', function(){
    var thisId = $(this).attr('id');
    $('.labelbox label').removeClass('checked');
    $('.labelbox label').each(function(){
      if( $(this).attr('for') == thisId ) {
        $(this).addClass('checked');
      }
    });
  });
});

[steef08]

Антон Литвиненко,

<script>
    jQuery(function($){
  $('.box_input input').on('change', function(){
    var thisId = $(this).attr('id');
    $('.labelbox label').removeClass('checked');
    $('.labelbox label').each(function(){
      if( $(this).attr('for') == thisId ) {
        $(this).addClass('checked');
      }
    });
  });
});
</script>

label:before {
    content:'';
    display: block;
    border-radius: 50%;
    border: 1px solid #0070c9;
    height: 39px;
    width: 39px;
    transform: translate(-3.4px, -3.4px);
    opacity: 0;
}
label.checked:before {
    opacity: 1;
}

Нет работает

[Антон Литвиненко]

steef08, селяви. Отгадать почему не работает я не могу. В песочнице работает? Работает. Значит надо дебажить, смотреть консоль логи, смотреть ошибки. Смотреть где ты подкючаешь скрипт итд

[steef08]

Антон Литвиненко, В любом случае Большущие спасибо Вам Антон за потраченное время и силы!

Answer 2

[Aetae]

Мужик, учи селекторы, все эти плюсики и звёздочки имеют конкретное значение, это не какая-то магия.
Это всё будет работать только если label находится в том же самом контейнере что и input и строго после (ниже) него. Иначе - только скрипты.

Comments

[steef08]

А как же магия? не? =(