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 that you have read and understand our privacy policy and code of conduct.

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