Сделать переключатели «проверяемыми»: HTML

Question

Как сделать так, чтобы переключатели работали больше как флажок? Мне нужна функция радиокнопки, но ее нужно отменить.

Answer 1

Обычно это достигается добавлением еще одной опции, «Нет». Пользователи не ожидают, что нажатие на выбранную радио-кнопку отменит ее выбор, поскольку это ненормальное поведение.

Еще одна опция, которая больше не используется, - это кнопка «Очистить». Мне не нравится этот вариант.

Answer 2

Вы можете сделать опцию «none» или создать кнопку javascript, чтобы отменить выбор всех переключателей. Интересно, реагирует ли событие onclick переключателя, если оно уже выбрано ...

Answer 3

Вы можете добавить функцию onClick для каждой кнопки-переключателя, которая отменяет выбор, если она была нажата во время выбора (не пробовала, но кажется разумной). Однако для большинства пользователей это действительно неожиданное поведение - я думаю, что другие ответы, предлагающие вариант «Нет», лучше.

РЕДАКТИРОВАТЬ: Просто для удовольствия, я попробовал это. Оно работает. Мой код довольно глупый - сделано только для быстрого теста.

<script>
  var x = false;
</script>

<input type="radio" value="test 1" name="1" onmousedown="if (this.checked) { x = true; }" onclick="if (x) {this.checked = false; x = false; return true;}" />1
<input type="radio" value="test 2" name="1" onmousedown="if (this.checked) { x = true; }" onclick="if (x) {this.checked = false; x = false; return true;}" />2
<input type="radio" value="test 3" name="1" onmousedown="if (this.checked) { x = true; }" onclick="if (x) {this.checked = false; x = false; return true;}" />3

Answer 4

Вы можете использовать опцию «none», как предлагают другие. Если это не приемлемо, ваши другие варианты:

1. Флажки с логикой, чтобы принять только один выбор.
2. Список, который допускает только один выбор.