将收音机设置为未选中答案

【问题标题】：Set radio to unchecked将收音机设置为未选中
【发布时间】：2018-02-17 06:30:46
【问题描述】：

我目前有一个手风琴，它是通过选中和未选中的单选按钮完成的。加载页面时，所有内容都会折叠，但是在它们最初打开后我无法实现这一点。我希望能够再次完全折叠手风琴。 https://codepen.io/anon/pen/WMdQdv

input[type=radio] + label::after {
 content: "\25BC";
 }

【问题讨论】：

改用复选框！
How to clear radio button in Javascript?的可能重复

标签： javascript html css

【解决方案1】：

您应该使用复选框：

<input id="tab-four" type="checkbox" name="tabs2">

Updated codepen.

【讨论】：

在我看来，OP 想要在选择不同选项时关闭的东西，复选框不会这样做（没有 js）。

【解决方案2】：

您可以向标签添加点击事件侦听器，检查当前是否检查了相应的输入，如果是，则通过将其checked 属性设置为false 来取消选中它。您还必须致电event.preventDefault() 以防止再次对其进行检查。

document.querySelectorAll('label').forEach(el =>
  el.addEventListener('click', (event) => {
    const inputId = event.target.getAttribute('for');
    const input = document.getElementById(inputId);
    if (input.checked) {
      input.checked = false;
      event.preventDefault();
    }
  })
);

Updated codepen.

【讨论】：

【解决方案3】：

正如 Michal 的回答所说，您应该使用复选框而不是单选按钮。

原因：

单选按钮不能取消选中。选择一个后，您可以更改选择了哪个，但不能手动取消选中它。

另一方面，复选框是一种切换。所以他们会在你的情况下工作得更好。

【讨论】：

单选按钮可以用 JavaScript 取消选中。
是的，这从根本上破坏了元素的预期功能。