根据单选按钮的选择更改div背景颜色

时间:2020-01-11 15:28:52

标签: radio-button background-color

我有一个非常简单的表单,邀请用户多次使用单选按钮选择是/否。

每个“是/否”选择都在“ section”类的div中。

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将背景更改为“ selected”类颜色(如果用户做出选择),或者将背景更改为“ notselected”类颜色。用户选择“否”。

0 个答案:

没有答案