1

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

4
  • Поведение которое вы описываете существует в виде готово элемента <input type="checkbox">. Может лучше стоит использовать его или важно чтоб было именно type="radio"?
    – RTK
    14 фев 2020 в 19:14
  • @RTK нужно, чтобы между двумя вариантами можно было выбрать только один, то есть нужно использовать radio
    – Alex
    14 фев 2020 в 19:19
  • @Alex То есть, если нажат один то выключить другой и наоборот?
    – Denis640Kb
    14 фев 2020 в 19:20
  • @Denis640Kb да, но при этом если нажать на активный input, чтобы он отключался, как в случае с input type=checkbox
    – Alex
    14 фев 2020 в 19:22

2 ответа 2

3

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

    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>

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/>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.