title: How to update radio button checked status with keyboard in real time JS
body: <p>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:</p>
  <pre class="lang-js prettyprint-override"><code>const ac1 = document.getElementById('ac-1');
  </code></pre>
  <p>Radio buttons wrapped in a form:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;form class=&quot;ac-container&quot;&gt;
  &lt;input id=&quot;ac-1&quot; name=&quot;accordion-1&quot; type=&quot;radio&quot; checked=&quot;checked&quot;&gt;
  &lt;input id=&quot;ac-2&quot; name=&quot;accordion-1&quot; type=&quot;radio&quot;&gt;
  &lt;input id=&quot;ac-3&quot; name=&quot;accordion-1&quot; type=&quot;radio&quot;&gt;
  &lt;input id=&quot;ac-4&quot; name=&quot;accordion-1&quot; type=&quot;radio&quot;&gt;
  &lt;/form&gt;
  </code></pre>
  <p>And this is my radio button CSS:</p>
  <pre class="lang-css prettyprint-override"><code>.ac-container input {
      opacity: 0;
  }
  </code></pre>
  <p>To check the status of the radio button I've tried:</p>
  <pre class="lang-js prettyprint-override"><code>if (ac1.checked) {
    //do something
  } 
  
  if (document.getElementById('ac-1').checked) {
    //do something
  }
  </code></pre>
  <p>I need the radio button status so I can display stuff in real time. For regular clicks I'm just using <code>addEventListener('click', (e) =&gt; {}</code> 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.</p>
  <p>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?</p>
  <p>I'll keep looking and update if I find anything.</p>