Así que tengo un acordeón con botones de radio invisibles. Todo funciona muy bien, hasta que trato de obtener el estado del botón de opción. Tengo 4 filas del siguiente código para cada botón de opción de acordeón:
const ac1 = document.getElementById('ac-1');Botones de radio envueltos en un formulario:
<form class="ac-container"> <input id="ac-1" name="accordion-1" type="radio" checked="checked"> <input id="ac-2" name="accordion-1" type="radio"> <input id="ac-3" name="accordion-1" type="radio"> <input id="ac-4" name="accordion-1" type="radio"> </form>Y este es mi botón de radio CSS:
.ac-container input { opacity: 0; }Para verificar el estado del botón de opción que he probado:
if (ac1.checked) { //do something } if (document.getElementById('ac-1').checked) { //do something } Necesito el estado del botón de radio para poder mostrar cosas en tiempo real. Para clics regulares, solo uso addEventListener('click', (e) => {} y funciona bien, pero necesito que los botones de opción funcionen también con el teclado. Es por eso que necesito el estado, así que si un botón de opción está marcada, puedo actualizar inmediatamente lo que se necesita.
No estoy seguro de si este es el problema pero, cuando hago clic en los botones de radio, el atributo 'marcado' nunca se transfiere de un botón al otro.
Seguiré buscando y actualizaré si encuentro algo.
Puede escuchar el evento de input .
Ejemplo:
<input type="radio" name="value" id="inp"> <input type="radio" name="value" id="inp2"> <script> const inp = document.getElementById("inp") const inp2 = document.getElementById("inp2") inp.addEventListener('input', (e) => { console.log(inp.checked) }) inp2.addEventListener('input', (e) => { console.log(inp.checked) }) </script>De mi comentario anterior...
"Dado que el OP usa casillas de verificación y/o controles de radio, ¿por qué el OP necesita una solución basada en JavaScript? (Casi) todo podría lograrse con HTML/CSS puro".
[data-accordion] [type="radio"] + p, [data-accordion] [type="checkbox"] + p { height: 0; overflow: hidden; opacity: 0; transition: opacity 2.5s ease-out; } [data-accordion] [type="radio"]:checked + p, [data-accordion] [type="checkbox"]:checked + p { height: auto; opacity: 1; } h2 { margin: 0; font-size: 1em; } p { margin: 0; } <article data-accordion> <section> <h2>Topic 4</h2> <input type="radio" name="single-fold" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec lectus ante. Suspendisse sed tortor purus. Suspendisse potenti. Nunc pharetra odio id lorem pellentesque tincidunt. </p> </section> <section> <h2>Topic 5</h2> <input type="radio" name="single-fold" /> <p> Praesent ut ipsum efficitur, commodo lectus eu, maximus risus. Fusce eu ipsum mauris. Pellentesque semper neque a convallis consequat. Suspendisse eu urna quis est condimentum dapibus id ac lectus. Nulla sit amet hendrerit arcu. </p> </section> <section> <h2>Topic 6</h2> <input type="radio" name="single-fold" /> <p> Vestibulum vel sapien convallis diam iaculis consectetur non non ex. Suspendisse eget hendrerit ipsum. Suspendisse finibus quam eget est fringilla, finibus vehicula tortor varius. Praesent fermentum ac odio a ullamcorper. </p> </section> </article> <hr/> <article data-accordion> <section> <h2>Topic 1</h2> <input type="checkbox" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec lectus ante. Suspendisse sed tortor purus. Suspendisse potenti. Nunc pharetra odio id lorem pellentesque tincidunt. </p> </section> <section> <h2>Topic 5</h2> <input type="checkbox" /> <p> Praesent ut ipsum efficitur, commodo lectus eu, maximus risus. Fusce eu ipsum mauris. Pellentesque semper neque a convallis consequat. Suspendisse eu urna quis est condimentum dapibus id ac lectus. Nulla sit amet hendrerit arcu. </p> </section> <section> <h2>Topic 3</h2> <input type="checkbox" /> <p> Vestibulum vel sapien convallis diam iaculis consectetur non non ex. Suspendisse eget hendrerit ipsum. Suspendisse finibus quam eget est fringilla, finibus vehicula tortor varius. Praesent fermentum ac odio a ullamcorper. </p> </section> </article>