Снятие checked c input radio при повторном клике на его label

Question

Необходимо как-то реализовать снятие выделения radio button при повторном клике по его label с помощью jquery. Проблема ещё и в том, что этот код должен быть применим к массиву input'ов, а не к 1 единственному input'у. В интернете есть множество решений, но половина устарела, а другая половина не работает при клике на label. При таком решении выделение снимается сразу же при 1-ом клике.

$(".price__calc-row input").change(function () {
  if ($(this).prop("checked")) {
    $(this).prop("checked", false);
  } else {
    $(this).prop("checked");
  }
});

Answer 1

<label> сам кликает на радио. И этот клик срабатывает раньше (меняя значение checked), чем другие обработчики клика, добавленные в коде. Если добавить event.preventDefault(); - радио перестанет отмечаться, но внутри функции this.checked всё равно всегда показывает true (Не знаю, предполагаю: лейбел сначала включает радио, а когда выполнение доходит до preventDefault, делается вывод, что checked надо отменить. Но во время выполнения, он всё еще true).

Поэтому, переключение состояния можно немного отложить, чтобы браузер завершил всю обработку, и можно было получить реальное значение checked.

$(".price__calc-row input").on("click", function (e) {
  console.clear(); console.log(this.checked); // всегда true;
  e.preventDefault();
  
  setTimeout(
    () => $(this).prop("checked", !this.checked).trigger("change")
  );
});

label { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="price__calc-row">
  <label><input type="radio" name="bubu"> test</label>
  <label><input type="radio" name="bubu"> test</label>
  <label><input type="radio" name="bubu"> test</label>
</div>

.trigger("change") нужен, чтобы обработчики "change" тоже сработали, если они есть.

P.s. у стрелочных функций нет собственного this, поэтому там this все еще ссылается на текущую радио-кнопку. Для более старых браузеров придется переписать так:

var _radio = this; 
setTimeout(function() {
  $(_radio).prop("checked", !_radio.checked).trigger("change");
});

БЛОГ НА HUSL

Снятие checked c input radio при повторном клике на его label

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