Tengo 2 días de experiencia con HTML, CSS y JS en desarrollo front-end.
Después de leer mucho, he podido hacer lo siguiente. Lo que pasa es que refresca al seleccionar el Mensual, pero no en el Anual, que es el seleccionado desde el principio.
Este es el código en el que he estado trabajando:
const switchMonthly = document.getElementById('switchMonthly'); const switchYearly = document.getElementById('switchYearly'); const flexy = document.getElementById('flexy'); switchMonthly.addEventListener('change', e => { flexy.classList.toggle('show-annually'); flexy.classList.toggle('show-monthly'); }) switchYearly.addEventListener('change', e => { flexy.classList.toggle('show-monthly'); flexy.classList.toggle('show-annually'); }) .show-monthly .price-box .monthly { display: none; } .show-monthly .price-box .annually { display: block; } .show-annually .price-box .monthly { display: block; } .show-annually .price-box .annually { display: none; } <input type="radio" id="switchMonthly" name="switchPlan" value="Monthly" /> <input type="radio" id="switchYearly" name="switchPlan" value="Yearly" checked="checked" /> <label for="switchMonthly">Monthly</label> <label for="switchYearly">Yearly</label> <div class="switch-wrapper"> <div class="switch"> <div>Monthly</div> <div>Yearly</div> </div> </div> </div> <div id="flexy" class="flex"> <div class="price-box"> <p> <span class="monthly"> 19.99 </span> <span class="annually"> 199.99 </span> </p> </div> </div>Como se expresó, el problema es que en el "anual" siempre muestra ambas opciones de precios.
El problema es que solo está activando y desactivando las clases cuando cambian los botones de opción. Pero dado que su div.flexy no tiene una clase de inicio, solo activa y desactiva .show-monthly y .show-annualmente juntos.
Solo dale a tu .flexy div una clase inicial y debería funcionar
Editar: también asegúrese de darle al botón de radio correspondiente el atributo marcado para comenzar con el botón correcto marcado al principio.