Как выключить input type=radio?

Question

При нажатии на input type=radio он включается, но при повторном нажатии на тот же input ничего не происходит, можно ли как то сделать, чтобы при повторном нажатии он отключался? В первую очередь желательно, если бы это можно было сделать либо через атрибут в html, либо в css, если же вариантов таких нет, то уже пример кода на js.

Answer 1

Первый вариант:

    var check1,check2;
    function radioClick(c) {
        if (check1 != c) {
            check2 = 0;
            check1 = c
        }
        check2 ^= 1;
        c.checked = check2
    }

<input type="radio" name="radio" value="1" onclick="radioClick(this)"/>
<input type="radio" name="radio" value="2" onclick="radioClick(this)"/>

Второй вариант:

    function clickRadio(param) {
        var value = document.querySelectorAll("input[type='radio'][name='" + param.name + "']");
        for (var i = 0; i < value.length; i++) {
            if (value[i] != param)
                value[i].BeforeCheck = false;
        }

        if (param.BeforeCheck)
            param.checked = false;
        param.BeforeCheck = param.checked;
    }

<label>Первый radio<input type="radio" onclick="clickRadio(this)" name="radio" /></label>
<label>Второй radio<input type="radio" onclick="clickRadio(this)" name="radio" /></label>

Answer 2

const checks = document.querySelectorAll('.check');
checks.forEach(function(ch) {
  ch.addEventListener('click', function() {
    var that = this;
    checks.forEach(function(ch2) {
      if (ch2 != that)
        ch2.checked = false;
    });
  });
});

<label>
  <input type="checkbox" class="check"/>
  Check1
</label><br/>
<label>
  <input type="checkbox" class="check"/>
  Check2
</label><br/>
<label>
  <input type="checkbox" class="check"/>
  Check3
</label><br/>

Answer 3

более универсальный вариант, вдруг кому пригодится:

document.addEventListener('click', function (e) {
  if (e.target.type !== 'radio') return;
  const radio = e.target;
  document.querySelectorAll(`input[type=radio][name="${radio.name}"]`)
    .forEach(item => {
      if (item !== radio && item.dataset.lastClicked) {
        item.removeAttribute('data-last-clicked');
      }
    });

  if (radio.checked && radio.dataset.lastClicked === 'true') {
    radio.checked = false;
    radio.removeAttribute('data-last-clicked');
  } else {
    radio.dataset.lastClicked = 'true';
  }
});

БЛОГ НА HUSL

Как выключить input type=radio?

Ответы (3 шт):