How to uncheck radio button

as we know, html radio button is a single choice, so we can't select more than one radio button.

radio button

Live Editor

<form>
  <label>
    <input type="radio" name="isLike" /> Item A
  </label>
  <label>
    <input type="radio" name="isLike" /> Item B
  </label>
</form>

<form>
  <label>
    <input type="radio" name="isLike" /> Item A
  </label>
  <label>
    <input type="radio" name="isLike" /> Item B
  </label>
</form>

Result

radio button are usually used in scenarios where the user selects an item from a set of options. Once the user selects an item, it cannot be clicked again to cancel the selection.

unchecked radio button

The radio buttons provided by default cannot be unselected, so they have to be handled by the click event.

<form>
  <label> <input type="radio" name="like" /> Item A </label>
  <label> <input type="radio" name="like" /> Item B </label>
</form>

we can set the checked attribute to false to uncheck the radio button.

const radioEls = document.querySelectorAll("input[type=radio]");
radioEls.forEach((el) => {
  el._checked = el.checked;
  el.addEventListener("click", (e) => {
    const target = e.target;
    if (target._checked) {
      target.checked = target._checked = false;
    } else {
      document.querySelectorAll(`input[name=${target.name}]`).forEach((el) => {
        el.checked = el._checked = false;
      });
      target.checked = target._checked = true;
    }
  });
});

This article is original, without authorization, any media or personal we media and any statement reproduced

Commercial infringement will be investigated, if you need authorization please contact[email protected]

The original link:https://www.jstyro.com/blog/how-to-uncheck-radio-button

Buy me a coffee

radio button​

unchecked radio button​

radio button

unchecked radio button