Question

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

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

Answer 1

您应该使用复选框：

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

Updated codepen

Answer 2

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

原因如下：

无法取消选中单选按钮。选择一个后，您可以更改选择的那个，但无法手动取消选中。

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

Answer 3

您可以向标签添加单击事件侦听器，检查当前是否选中了相应的输入，如果是，请通过将其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 个答案: