Изменить background для label у input type="radio"?

Question

[onjkeee]

Суть вопроса такова, необходимо реализовать условие, если input type="radio" имеет статус cheked, то необходимо изменить background для принадлежащего label.

<div class="controls">
	<label for="customProductData_4_1918" id="customProductData_4_1918-lbl" class="radio">	
	<input type="radio" name="customProductData[4][3]" id="customProductData_4_1918" value="18" checked="checked">32см, 400г 
	</label>

	<label for="customProductData_4_1919" id="customProductData_4_1919-lbl" class="radio">	
	<input type="radio" name="customProductData[4][3]" id="customProductData_4_1919" value="19">42см, 650г 
	</label>
</div>

Answer 1

[Арсений Матыцин]

label должен находится после input-а, тогда конструкция селекторов: input:checked + label позволит такое совершить. Либо завернуть текст в span и по то же конструкции, но вместо label обращаться к input:checked + span.

Либо по клику на чекбокс, меняй класс родителя на модификатор с необходимым фоном. Грубо, так:

if (element.checked) {
    parent.classList.remove('classname')
} else {
    parent.classList.add('classname')
}

Comments

[onjkeee]

в том и проблема, что возможности изменить саму структуру html нет возможности

[Арсений Матыцин]

Никодим, тогда. раз я вижу в тегах вопроса JS, делай это на нем. По клику на чекбокс, меняй класс родителя на модификатор с необходимым фоном. Грубоа, так:

if (element.checked) {
    parent.classList.remove('classname')
} else {
    parent.classList.add('classname')
}