Как убрать checked с input radio при клике на него?

Question

[Денис Кузьмин]

Здравствуйте.
Как убрать checked с input radio при клике на него, если этот input выбран?

Пробовал так, не получается выбрать input, при клике checked сразу убирает.

$('input[name="input-radio"]').on('click', function () {
  if ( $(this).is(':checked') ) {
    $(this).prop('checked', false);
  }
});

Answer 1

[0xD34F]

А что за задача-то решается? Нужен гибрид радиокнопки и чекбокса?

Вариант раз, радиокнопки:

let checked = null;

$('input').click(function() {
  checked = checked === this.value ? null : this.value;
  this.checked = !!checked;
});

// или

document.querySelectorAll('input').forEach(function(n) {
  n.addEventListener('click', this);
}, function({ target: t }) {
  t.checked = !!(this[0] = this[0] === t ? null : t);
}.bind([]));

Вариант два, с заменой радиокнопок чекбоксами:

const $checkboxes = $('input').change(function() {
  if (this.checked) {
    $checkboxes.not(this).prop('checked', false);
  }
});

// или

const checkboxes = document.querySelectorAll('input');
const onChange = e => checkboxes.forEach(n => n.checked &&= n === e.target);
checkboxes.forEach(n => n.addEventListener('change', onChange));

Вариант три - вместо того, чтобы изменять значение свойства checked вручную, добавьте ещё одну радиокнопку, которая будет обозначать отсутствие выбора.

Comments

[Денис Кузьмин]

Спасибо большое!

А что за задача-то решается?

Нужно предоставить выбор одной из опций и при этом оставить возможность отменить выбор. Можно конечно и чекбоксами, но тогда нужно делать, чтобы при выборе одного сбрасывался другой. Как мне кажется, проще сделать это радиокнопкой.