JS如何用键盘实时更新单选按钮选中状态

Question

所以我有一个带隐形单选按钮的手风琴。一切正常，直到我尝试获取单选按钮的状态。每个手风琴单选按钮有 4 行以下代码：

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

包裹在表单中的单选按钮：

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

这是我的单选按钮 CSS:

.ac-container input {
    opacity: 0;
}

要检查我试过的单选按钮的状态：

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

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

我需要单选按钮状态以便实时显示内容。对于常规点击，我只使用 addEventListener('click', (e) => {} 并且它工作正常，但我需要单选按钮也可以与键盘一起使用。这就是我需要状态的原因，所以如果选中单选按钮，我可以立即更新所需内容。

我不确定这是否是问题所在，但是当我单击单选按钮时，'checked' 属性从未从一个按钮转移到另一个按钮？

如果有发现，我会继续寻找并更新。

Answer 1

您可以监听 input 事件。

示例：

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

Answer 2

根据我上面的评论...

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

JS如何用键盘实时更新单选按钮选中状态

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

html

javascript