I need to implement a feature with 3 checkboxes:
- When the "A" checkbox is clicked, only "A" should be highlighted.
- Upon clicking the "C" checkbox, only "C" gets highlighted.
- If the "B" checkbox is clicked, both "A" and "B" need to be highlighted.
.a {
background-color: #ffffff;
font-family: Lato;
font-size: 11.2px;
font-weight: 500;
text-align: center;
color: #6a7c94;
padding: 2px;
width: 100px;
height: 34.2px;
margin-bottom: 15px;
box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.15);
}
#checkboxes input[type=checkbox] {
display: none;
}
#checkboxes input[type=checkbox]:checked+.a {
border-top: 2px solid #39cd90;
color: rgb(57, 205, 144);
padding-top: 0px;
}<div id="checkboxes">
<input type="checkbox" name="rGroup" id="r1" />
<label class="a" for="r1">A </label>
<input type="checkbox" name="rGroup" id="r2" />
<label class="a" for="r2">B </label>
<input type="checkbox" name="rGroup" id="r3" />
<label class="a" for="r3">C</label>
</div>When selecting "B", I want both "A" and "B" to be highlighted simultaneously for multiple selection. Here is the complete code. Any suggestions on how to achieve this functionality would be greatly appreciated.