How to fill the background of the block if the checkbox is selected?

Question

css

Hello! We have the following structure:

<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>

If I do this:

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

, then only the text in the tag is selected. And how do I paint a gray background div block with class hideRadio?
Maybe this can all be written using Angular or how they do it in jQuery (add a class if radio is checked)
Thanks in advance.

Answer 1

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

Answer 2

jsfiddle.net/lega911/m96xuexe

Answer 3

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

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

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