Как изменить стиль надписи на флажке: установлен

Question

В настоящее время я создаю форму с флажками, обернутыми внутри меток. Мы делаем это, потому что нам нужно поменять наш оригинальный флажок для изображения. Однако, когда флажок установлен, нам нужно сделать так, чтобы метка имела рамку, чтобы дать некоторую обратную связь с пользователем.

Вот настройка ярлыков / флажков

<div class="one_column">
    <label for="fieldname2_1_cb0">
      <input name="fieldname2_1[]" id="fieldname2_1_cb0" class="field depItem group  required" value="Alloy Wheel(s)" vt="Alloy Wheel(s)" type="checkbox"> <span>Alloy Wheel(s)</span>
    </label>
</div>

Мы пытались использовать следующее, но, очевидно, не работает

label input[type="checkbox"]:checked + label {
border: 5px solid blue;
}

Любая помощь будет признателен!

Мне удалось установить первый флажок, используя приведенный ниже код

    window.onload=function() {
  document.querySelector('input[type="checkbox"]').addEventListener('change', 
  function() {
      if (this.checked) {
      this.parentNode.classList.add('border-blue');
      } else {
        this.parentNode.classList.remove('border-blue');
      }
   })}

Тем не менее, он меняет только первый флажок ... всего 10 следующих та же структура, что и выше

Answer 1

Используя CSS, невозможно выбрать родительские элементы из дочерних элементов.

Если вам разрешено использовать JavaScript, вы можете решить это следующим образом:

document.querySelectorAll('input[type="checkbox"]').forEach(function(el) {
  el.addEventListener('change', function() {
    if (this.checked) {
      this.parentNode.classList.add('border-blue');
    } else {
      this.parentNode.classList.remove('border-blue');
    }
  })
})

.border-blue {
  border: 5px solid blue;
}

Он проверит изменения на входе. Если это проверено, класс будет добавлен. В противном случае класс будет удален.