Как задать стиль родительскому div в зависимости от вложенног input?

Question

[Grizar]

У меня есть такие пункты
Красный(5)
Синий(0)
Черный(4)
здесь - https://jsfiddle.net/gkan10qr/20/
https://jsfiddle.net/gkan10qr/21/
Зависимость у меня только одна
это строки 4, 14 и 23
в<input разные name=,
т.е. мы имеем несколько name=

name="qwer"
name="asdf"
name="zxcv"

Как мне в зависимости от этих значений присвоить свой background: ####;
нужно каждому <div class="icheckbox_flat-blue" >
добавить еще один класс
чтобы я смог задать стили для каждого дива
т.е из <div class="icheckbox_flat-blue" > надо получить
<div class="icheckbox_flat-blue new-style"> т.е.
<div class="icheckbox_flat-blue qwer"> - т.е. для каждого свой класс чтоб в итоге можно было применить стили типа

.icheckbox_flat-blue .asdf {
      background: #F44336;   
}
.icheckbox_flat-blue .qwer {
     background: #333;  
}
.icheckbox_flat-blue.zxcv {
       background: #4CAF50;    
}

Answer 1

[Daniil Dubrava]

https://jsfiddle.net/fc10kdtw/

const inputs = document.getElementsByTagName('input');

[...inputs].forEach((input) => {
  if (input.type !== 'hidden') {
    input.parentNode.classList.add(input.name);
  }
})

Получим HTMLCollection из input'ов. Итерируем массив из полученных элементов, у каждого не скрытого получаем parentNode, это необходимый div. Добавляем ему необходимые классы, полученные из input.name.

Comments

[Grizar]

Да ваш ответ работает, но т.к. на сайте есть еще html и скрипты то это работает не совсем так как надо, я подправил вопрос.
Надо добавить доп стиль к диву в зависимости от name=, а значение name= может быть каким угодно.

[Daniil Dubrava]

Grizar, обновил ответ

[Grizar]

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

[Daniil Dubrava]

Grizar, потому что первый стили через js проставлял, а тут еще и css подключился. есть ссылка на сайт? надо посмотреть через девтулзы добавился ли класс вообще. если добавился, то надо копать в сторону css

[Grizar]

Daniil Dubrava, не, во втором варианте класс вообще недобавился

[Daniil Dubrava]

Grizar, можете код выгрузить еще раз? может в разметке что-то поменялось? там алгоритм то вроде тот же. и сайт бы глянуть, если можно

[Grizar]

сайт на локале, вордпресс.
вот весь блок
https://jsfiddle.net/gkan10qr/27/
строка 9,18,27
инпуты kras, sin, cher
разметка таже вобщемто

[Daniil Dubrava]

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

Проверьте нашлись ли элементы
console.log(inputs);

Проверьте, что у них родитель нужный вам div
console.log(input.parentNode);

Без кода не могу точно помочь