Нужно при отмеченном checkbox изменить цвет border label, а при неактивном вернуть обратно. Как сделать?

Question

[Олег Степанов]

Нужно при отмеченном checkbox изменить цвет border label , а при неактивном вернуть обратно . Стилями у меня не получается.

<form method="post" action="#" id="calcbasspriamstup">

  <input type="checkbox" id="Checkbox1" name="element" value="12000" checked>
  <label for="Checkbox1 id="Label1">Обвязка трубами</label>

  <input type="checkbox" id="Checkbox2" name="aksessuar" value="15000">
  <label for="Checkbox2" id="Label2">Пылесос</label>

  <input type="checkbox" id="Checkbox3" name="oborudovanie" value="55000">
  <label for="Checkbox3" id="Label3">Фильтр-насос 069</label>

  <button type="submit">ОФОРМИТЬ ЗАКАЗ</button>
</form>
<style>

#Label1
{
   border: 1px #D2D0D0 solid;
   border-radius: 14px;
   background-color: transparent;
   background-image: url(../images/obviazka.png);
   background-repeat: no-repeat;
   background-position: center center;
   color :#3E3E3E;
   font-family: "TT Norms Medium";
   font-weight: normal;
   font-size: 16px;
   padding: 150px 4px 4px 4px;
   text-align: center;
   vertical-align: top;
}
#Label2
{
   border: 1px #D2D0D0 solid;
   border-radius: 14px;
   background-color: transparent;
   background-image: url(../images/pilesos.png);
   background-repeat: no-repeat;
   background-position: center center;
   color :#3E3E3E;
   font-family: "TT Norms Medium";
   font-weight: normal;
   font-size: 16px;
   padding: 150px 4px 4px 4px;
   text-align: center;
   vertical-align: top;
}
#Label3
{
   border: 1px #D2D0D0 solid;
   border-radius: 14px;
   background-color: transparent;
   background-image: url(../images/filtr.png);
   background-repeat: no-repeat;
   background-position: center center;
   color :#3E3E3E;
   font-family: "TT Norms Medium";
   font-weight: normal;
   font-size: 16px;
   padding: 150px 4px 4px 4px;
   text-align: center;
   vertical-align: top;
}
input[type='checkbox']:checked + label::before {
  border-color: #0063C4 !important;
}

input[type='checkbox']:disabled + label::before {
  border-color: #D2D0D0 !important;
}
</style>

Comments

[Алексей Дубровин]

"label::before" - before причем?

[Олег Степанов]

А как правильно ?

[Олег Степанов]

Без before тоже не работает

[Олег Степанов]

Может скриптом каким то это сделать ?

[Nekio]

Олег Степанов,
Здесь и css достаточно чтобы это сделать, но, если скриптом, то можно вот так:

let inputs = document.querySelectorAll('input[type="checkbox"]')
let labels = document.querySelectorAll('label')

for (let elem of inputs){
    function checker(){
        for (let el of labels){
            if (elem.id == el.htmlFor){
                elem.checked ? el.classList.add('checkbox__label') : el.classList.remove('checkbox__label')
            }
        }
    }
    elem.addEventListener('change', function(){
        checker()
    })
    checker()
}

[Олег Степанов]

Nekio, не работает . Я не могу присваивать никаких классов к label , потому что у меня для каждого label своя картинка

[Nekio]

Олег Степанов, что именно не работает?

[Ankhena]

Олег Степанов,

Я не могу присваивать никаких классов к label , потому что у меня для каждого label своя картинка

Что? Как эти вещи вообще связаны?

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

.form input[type="checkbox"]:checked + label {

}

[Олег Степанов]

Nekio, Nekio, спасибо , всё работает , но над чекбоксом появилась какая то точка во всех чекбоксах .

.checkbox__label {
border: 1px #0063C4 solid !important;
}

[Nekio]

Олег Степанов, просто подкорректируйте стили класса .checkbox__label:

.checkbox__label {
  border: 1px #D2D0D0 solid;
  border-radius: 14px;
  padding: 4px;
}

[Олег Степанов]

Nekio, не помогает , border должен быть только для label

[Nekio]

Олег Степанов, Так класс и присваивается к label, соответственно и border этого класса тоже будет расположен на label

[Олег Степанов]

Nekio, спасибо за помощь , всё сделал , всё работает .

Answer 1

[Сергей delphinpro]

https://codepen.io/delphinpro/pen/gOvKRMo

Comments

[Олег Степанов]

Спасибо , работает . А может скриптом как то можно сделать , что бы классы не прописывать везде ? У меня таких чекбоксов около 60 штук ))

[Сергей delphinpro]

Олег Степанов, вы сейчас спрашиваете, можно ли забивать гвозди кирпичом при наличии молотка. Можно, но зачем?

[Олег Степанов]

Сергей delphinpro, я понимаю , но хотелось бы при помощи скрипта это всё реализовать , если можно конечно