I have this HTML
Now, I want to set the background color of the selected radio li element.
I am trying this using this JavaScript
function radioClicked ( current) {
if(current.checked) {
current.parentElement.style.backgroundColor ="#9bb70c";
} else {
current.parentElement.style.backgroundColor ="";
}
} <div class="reg-content-wrapper">
<ul>
<li>
<label for="">20s</label>
<input type="radio" name="age" onclick="radioClicked(this)" value="20">
</li>
<li>
<label for="">30s</label>
<input type="radio" name="age" onclick="radioClicked(this)" value="30">
</li>
<li>
<label for="">40s</label>
<input type="radio" name="age" onclick="radioClicked(this)" value="40">
</li>
<li>
<label for="">50s</label>
<input type="radio" name="age" onclick="radioClicked(this)" value="50">
</li>
<li>
<label for="">60s</label>
<input type="radio" name="age" onclick="radioClicked(this)" value="60">
</li>
<li>
<label for="">70s and above</label>
<input type="radio" name="age" onclick="radioClicked(this)" value="70+">
</li>
</ul>
</div>but not working as expected :(
This should hopefully do what you want. Here the selected button is being saved so that when a new button is clicked the previous radio button can be referenced and reset.
let prev;
function radioClicked ( current) {
if (prev != null) {
prev.parentElement.style.backgroundColor ="";
}
prev = current;
if(current.checked) {
current.parentElement.style.backgroundColor ="#9bb70c";
}
} <div class="reg-content-wrapper">
<ul>
<li>
<label for="">20s</label>
<input type="radio" name="age" onclick="radioClicked(this)" value="20">
</li>
<li>
<label for="">30s</label>
<input type="radio" name="age" onclick="radioClicked(this)" value="30">
</li>
<li>
<label for="">40s</label>
<input type="radio" name="age" onclick="radioClicked(this)" value="40">
</li>
<li>
<label for="">50s</label>
<input type="radio" name="age" onclick="radioClicked(this)" value="50">
</li>
<li>
<label for="">60s</label>
<input type="radio" name="age" onclick="radioClicked(this)" value="60">
</li>
<li>
<label for="">70s and above</label>
<input type="radio" name="age" onclick="radioClicked(this)" value="70+">
</li>
</ul>
</div>You can do that with CSS.
with little formatting and use CSS selector :checked + label
input:checked + label {
background-color: #9bb70c;
} <div class="reg-content-wrapper">
<ul>
<li>
<input type="radio" name="age" value="20">
<label for="">20s</label>
</li>
<li>
<input type="radio" name="age" value="30">
<label for="">30s</label>
</li>
<li>
<input type="radio" name="age" value="40">
<label for="">40s</label>
</li>
<li>
<input type="radio" name="age" value="50">
<label for="">50s</label>
</li>
<li>
<input type="radio" name="age" value="60">
<label for="">60s</label>
</li>
<li>
<input type="radio" name="age" value="70+">
<label for="">70s and above</label>
</li>
</ul>
</div>