Изменить цвет фона div в зависимости от выбора переключателя - PullRequest
Новая
       7

Изменить цвет фона div в зависимости от выбора переключателя

0 голосов
/ 11 января 2020

У меня есть очень простая форма, предлагающая пользователю сделать выбор выбора да / нет с помощью радиокнопок, несколько раз.

Каждый выбор да / нет находится в div класса "section".

HTML: 

<div class="section">
<p>Use first?</p>
<p>&nbsp;Yes&nbsp;<input type="radio" name="first" value="yes" /></p>
<p>&nbsp;No&nbsp;<input type="radio" name="first" value="no" /></p>
</div>

<div class="section">
<p>Use second?</p>
<p>&nbsp;Yes&nbsp;<input type="radio" name="second" value="yes" /></p>
<p>&nbsp;No&nbsp;<input type="radio" name="second" value="no" /></p>
</div>

<div class="section">
<p>Use third?</p>
<p>&nbsp;Yes&nbsp;<input type="radio" name="third" value="yes" /></p>
<p>&nbsp;No&nbsp;<input type="radio" name="third" value="no" /></p>
</div>

CSS: 

.section {
width:100%;
height:auto;
background-color:#fff;
margin:0px 0px 15px 0px;
padding:0.5em;
border-radius:0.5em;
}

.selected {
background-color:#d3f2ce;
}

.notselected {
background-color:#ff946f;
}

То, что я хотел бы, для любого или всех классов "section" div для изменения цвета фона на «выбранный» класс, если пользователь делает выбор «да», или на цвет «не выбранный» класс, если пользователь делает выбор «нет».

...