Как найти label определенного input-та?

Question

[Михаил Юматов]

Обновлено: Всем спасибо, решил задачу
Решение
Код приложил.
Нужно при input:checked изменять его label. При моей структуре достать его через css не получится наверное? (да/нет?)
Если нет, то как реализовать через js?
Ссылка на код jsfiddle

Comments

[FeST1VaL]

если честно, не понятно какой label вы пытаетесь найти...

[Михаил Юматов]

Артем Будин, есть связка input id="svyazka" и label for="svyazka". Мне нужно менять css label-ла при чекнутом input-е.

Answer 1

[0xD34F]

При моей структуре достать его через css не получится наверное? (да/нет?)

получится, если разместить input'ы перед label'ами

Answer 2

[Сергей delphinpro]

Без оглядки на конкретную структуру верстки связь между инпутом и меткой осуществляется через атрибуты for=id. Вот по ним и ищите.

input.addEventListener('change', e => {
  let label = document.querySelector(`[for="${e.target.id}"]`);
  console.log(label); // Нашли!
})

Comments

[Михаил Юматов]

Еще бы разбираться в этом

[olya_097]

Сергей delphinpro, натолкнулась на ваш ответ. Можете сказать зачем тут ` и $ ?

[Сергей delphinpro]

olya_097, Шаблонные строки (template strings)

[Сергей delphinpro]

Михаил Юматов, ну в этом в общем-то нужно разбираться =) Самое время начать изучать.

Answer 3

[Максим Сиваконь]

Я думаю я понял о чём идет речь!

Воспользуйся

:nth-child

/*Вот так можно обращаться*/
.dopbsp-cart tr:nth-child(3) > .dopbsp-label:before{}

И можно будет обратиться к любому input и применить к нему стиль, также можно и через Jquery просто указываем .myclass:nth-child(1)

//например
$( "ul li:nth-child(2)" ).append( "<span> - 2nd!</span>" );

Подробней о :nth-child тут! и тут!

Я тут отвечал более подробно с примером!

Comments

[Михаил Юматов]

Спасибо, пришлось немного переделать, но в итоге все реализовал на чистом css (как и хотел).
PS: Как я сам не догадался про :nth-child.

Answer 4

[Александр Смирнов]

Не совсем понятно, что имеется ввиду под словом "изменять". Как я понимаю, нужно получить кастомный чекбокс, почитать можно здесь