Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

95
Vistas
How to update radio button checked status with keyboard in real time JS

So I have an accordion with invisible radio buttons. Everything works fine and well, until I try to get the status of the radio button. I have 4 rows of the following code for each accordion radio button:

const ac1 = document.getElementById('ac-1');

Radio buttons wrapped in a form:

<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>

And this is my radio button CSS:

.ac-container input {
    opacity: 0;
}

To check the status of the radio button I've tried:

if (ac1.checked) {
  //do something
} 

if (document.getElementById('ac-1').checked) {
  //do something
}

I need the radio button status so I can display stuff in real time. For regular clicks I'm just using addEventListener('click', (e) => {} and it works fine, but I need the radio buttons to also function with keyboard. That's why I need the status, so if a radio button is checked I can immediately update what's needed.

I'm not sure if this is the problem but, when I click on the radio buttons, the 'checked' attribute never transfers from one button to the other?

I'll keep looking and update if I find anything.

7 months ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

You can listen for input event.

Example:

<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>
7 months ago · Juan Pablo Isaza Denunciar

0

From my above comment ...

"Since the OP uses checkbox and/or radio controls why does the OP then need a JavaScript based solution? (Almost) everything could be achieved by pure HTML/CSS. "

[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>

7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.