如何在实时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;
}

查看单选按钮I've try的状态:

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

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

我不确定这是否是问题，但是，当我单击单选按钮时，"检查"属性从不从一个按钮转移到另一个?

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

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

从我上面的评论…

"既然OP使用复选框和/或单选控件，为什么OP那么需要基于JavaScript的解决方案?(几乎)一切都可以通过纯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>