Tengo una especie de semáforo y quisiera rellenarlo en función de la opción que vaya escogiendo el usuario con un radio button con valores {0,1,2,3}. Con 0, se apagan todos, con 1 se enciende el primero, con 2 se enciende el primero y el segundo y con 3 se encienden todos.
He metido cada círculo en una división simplemente para alinearlo a mi manera con el css correspondiente.
<div class="TLightR">
<svg id="svg1" style="width: 1.5in; height: 0.55in">
<circle id="circle1" r="20" cx="30" cy="30" style="fill: red; stroke: black; stroke-width: 2"/>
</svg>
</div>
<div class="TLightY">
<svg id="svg2" style="width: 1.5in; height: 0.55in">
<circle id="circle2" r="20" cx="30" cy="30" style="fill: transparent; stroke: black; stroke-width: 2"/>
</svg>
</div>
<div class="TLightG">
<svg id="svg3"style="width: 1.5in; height: 0.55in">
<circle id="circle3" r="20" cx="30" cy="30" style="fill: transparent; stroke: black; stroke-width: 2"/>
</svg>
</div>
<div class="Led1">
<input type="radio" name="Led1" value="0">0
<input type="radio" name="Led1" value="1">1
<input type="radio" name="Led1" value="2">2
<input type="radio" name="Led1" value="3">3
</div>
¿Alguna idea de como hacerlo en HTML? ¿O habría ya que meterse en PHP o JS?
Muchas gracias de antemano.
EDITO: Muchas gracias por la respuesta, el problema viene ahora cuando quiero darle un posicionamiento relativo para cada círculo de manera independiente. Ya no puedo usar el div class="TlightR" ya que deja de funcionar, alguna idea?
EDITO2: Ya lo he conseguido, aunque he tenido que llamar a los círculos con distintas clases para poder meterlos dentro de clases y asignarles posicionamiento relativo dentro del .css
<section class="semaforo">
<div class="Cir1">
<svg class="semaforo-luz">
<circle class="circulo1" cx="20" cy="20" r="20"></circle>
</svg>
</div>
<div class="Cir2">
<svg class="semaforo-luz">
<circle class="circulo2" cx="20" cy="20" r="20"></circle>
</svg>
</div>
<div class="Cir3">
<svg class="semaforo-luz">
<circle class="circulo3" cx="20" cy="20" r="20"></circle>
</svg>
</div>
</section>
<section>
<div class="Led1Css">
<input class="semaforo-sistema" type="radio" name="Led1" value="0">0
<input class="semaforo-sistema" type="radio" name="Led1" value="1">1
<input class="semaforo-sistema" type="radio" name="Led1" value="2">2
<input class="semaforo-sistema" type="radio" name="Led1" value="3">3
</section>
<script>
let eleccion = document.querySelectorAll(".semaforo-sistema")
let circulo1 = document.querySelectorAll(".circulo1")
let circulo2 = document.querySelectorAll(".circulo2")
let circulo3 = document.querySelectorAll(".circulo3")
eleccion.forEach((elemento) => {
elemento.addEventListener("click", () => {
if (elemento === eleccion[1]) {
circulo1[0].classList.add("semaforo-rojo")
circulo2[0].classList.remove("semaforo-amarillo")
circulo3[0].classList.remove("semaforo-azul")
} else if(elemento === eleccion[2]) {
circulo1[0].classList.add("semaforo-rojo")
circulo2[0].classList.add("semaforo-amarillo")
circulo3[0].classList.remove("semaforo-azul")
} else if(elemento === eleccion[3]){
circulo1[0].classList.add("semaforo-rojo")
circulo2[0].classList.add("semaforo-amarillo")
circulo3[0].classList.add("semaforo-azul")
} else if(elemento === eleccion[0]){
circulo1[0].classList.remove("semaforo-rojo")
circulo2[0].classList.remove("semaforo-amarillo")
circulo3[0].classList.remove("semaforo-azul")
}
})
})
</script>