Set radio to unchecked

Question

I currently have an accordion which is done by checked and unchecked radio buttons. When the page is loaded everything is collapsed however I have no way to achieve this after they have initially been opened. I want to be able to fully collapse the accordion again. https://codepen.io/anon/pen/WMdQdv

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

Possible duplicate of [How to clear radio button in Javascript?](https://stackoverflow.com/questions/2554116/how-to-clear-radio-button-in-javascript) — zero298, Feb 16 '18 at 22:02

score 4 · Answer 1 · answered Feb 16 '18 at 21:42

4

You should use a checkbox instead:

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

Updated codepen.

answered Feb 16 '18 at 21:42

Michał Perłakowski

88,409
26
156
177

It sounds like to me the OP wants something that will close when a different option is selected, a checkbox won't do that (without js). – Get Off My Lawn Feb 16 '18 at 22:29

score 0 · Answer 2 · answered Feb 16 '18 at 22:00

0

As Michal's answer says, you should use a checkbox instead of a radio button.

For the reason why:

Radio buttons can't be unchecked. Once you select one, you can change which one is selected, but you can't manually uncheck it.

Checkboxes, on the other hand, are a toggle. So they'll work better in your situation.

answered Feb 16 '18 at 22:00

Lee A.

33
6

Radio buttons can be unchecked with JavaScript. – Michał Perłakowski Feb 16 '18 at 22:32
Yes, which fundamentally breaks the intended functionality of the element. – Lee A. Feb 17 '18 at 01:46

score 0 · Accepted Answer · answered Feb 16 '18 at 22:30

You can add a click event listener to the labels, check if the corresponding input is currently checked, and if so, uncheck it by setting its checked property to false. You also have to call event.preventDefault() to prevent it from being checked again.

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.

Set radio to unchecked

3 Answers3