tengo este html
Ahora, quiero establecer el color de fondo del elemento de radio li seleccionado.
Estoy intentando esto usando este 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>pero no funciona como se esperaba :(
Con suerte, esto debería hacer lo que quieres. Aquí, el botón seleccionado se guarda para que cuando se haga clic en un botón nuevo, se pueda hacer referencia al botón de opción anterior y restablecerlo.
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>Puedes hacerlo con CSS.
con poco formato y use el selector CSS :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>