Как залить фон блока если выбран чекбокс?

Question

[Айдар]

Здравствуйте! Имеем такую структуру:

<div class="row">
        <div class="col-md-3">
          <div class="hideRadio">
            <img src="http://i013.radikal.ru/1606/23/77673ff2a869.png">
            <input type="radio" ng-model="typemat" value="bal1">
            <p>Балкон1</p>
          </div> 
        </div>
        <div class="col-md-3">
          <div class="hideRadio">
            <img src="http://i013.radikal.ru/1606/23/77673ff2a869.png">
            <input type="radio" ng-model="typemat" value="bal2">
            <p>Балкон2 </p>
          </div>
         </div>
        </div>

Если делаю так:

input[type=radio]:checked + p {
  color: #000;
  font-weight: bold;  
}

,то выделяется только текст в теге . А как мне закрасить серым фоном div блок c классом hideRadio?
Может это можно все прописать средствами Angular или как это делают в jQuery (добавляют класс,если radio checked)
Заранее спасибо.

Answer 1

[Котик Антон]

В CSS нет селектора родителя/предка. См. stackoverflow.com/questions/1014861/is-there-a-css...

Только через JavaScript.

Answer 2

[lega]

jsfiddle.net/lega911/m96xuexe

Answer 3

[SirMustache]

Можно, например, на <div class="hideRadio"> добавить:

<div class="hideRadio"
ng-class="{'is-active': typemat === 'bal1'}">  <-- проверка на значение модели нужного радиобаттона.

https://jsfiddle.net/L4cLxp43/1/