Вызовите функцию JavaScript, когда определенное радио становится невыбранным

Question

У меня есть несколько радиовходов, и я хотел бы вызывать функцию JS только в том случае, если радио id3 выбрано и становится невыбранным.

Я искал, но нашел только решения, где проверяется только проверенный / непроверенный статус:

$("input:radio").change(function() {
  if ($("#id3").is(":checked")) {
    alert('checked');
  } else {
    alert('unchecked');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="shipping_method" value="1" id="id1" data-refresh="5" class="">
<input type="radio" name="shipping_method" value="2" id="id2" data-refresh="5" class="">
<input type="radio" name="shipping_method" value="3" id="id3" data-refresh="5" class="">

Answer 1

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

var isChecked = false;
$("input:radio").change(function () {
  if ($("#id3").is(":checked")) {
        isChecked = true;
    } else {
      if (isChecked) {
        alert("Unchecked");
        isChecked = false;
      }

    }
});

CodePen: https://codepen.io/ashfaq_haq/pen/LYYjLrv?editors=1010

Answer 2

Вам нужно будет отслеживать, когда вы в последний раз щелкнули его, чтобы узнать, нужно ли говорить, что он не выбран.

Обычный JS

Это довольно просто сделать в чистом видеJavaScript. Вы можете использовать дизайн атрибута data-* для хранения состояния последней проверки элемента.

let targetEl = document.getElementById('id3');

Array.from(document.querySelectorAll('input[type="radio"]')).forEach(radioEl => {
  radioEl.addEventListener('change', function(e) {
    if (e.target.id === targetEl.id && e.target.checked) {
      alert(e.target.id + ' - checked');
      e.target.setAttribute('data-waschecked', true);
    } else if (targetEl.getAttribute('data-waschecked') === 'true') {
      alert(targetEl.id + ' - unchecked');
      targetEl.setAttribute('data-waschecked', false);
    }
  });
});

<input type="radio" name="shipping_method" value="1" id="id1" data-refresh="5">
<input type="radio" name="shipping_method" value="2" id="id2" data-refresh="5">
<input type="radio" name="shipping_method" value="3" id="id3" data-refresh="5">

jQuery

Это продвинутое решение позволяет контролировать несколько переключателей. Он написан в основном на jQuery.

const trackableIds = [ 'id1', 'id3' ];

$('input[type="radio"]').on('change', function(e) {
  let $target = $(e.target),
      isTrackable = trackableIds.includes($target.attr('id'));
  if (isTrackable && $target.is(':checked')) {
    alert($target.attr('id') + ' - checked');
    $target.attr('data-waschecked', true);
  }
  trackableIds.filter(trackId => trackId !== $target.attr('id'))
    .forEach(trackId => {
      let $trackable = $('#' + trackId);
      if ($trackable.attr('data-waschecked') === 'true') {
        alert($trackable.attr('id') + ' - unchecked');
        $trackable.attr('data-waschecked', false);
      }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="shipping_method" value="1" id="id1" data-refresh="5">
<input type="radio" name="shipping_method" value="2" id="id2" data-refresh="5">
<input type="radio" name="shipping_method" value="3" id="id3" data-refresh="5">

Как плагин jQuery

Практически идентично поведению jQuery выше, но как плагин. Есть даже пользовательские функции функции обратного вызова для проверки / снятия галочки.

(($) => {
  $.fn.trackRadio = function(ids, opts) {
    this.on('change', function(e) {
      let $target = $(e.target), isTrackable = ids.includes($target.attr('id'));
      if (isTrackable && $target.is(':checked')) {
        opts.onCheckFn($target);
        $target.attr('data-waschecked', true);
      }
      ids.filter(trackId => trackId !== $target.attr('id')).forEach(trackId => {
        let $trackable = $('#' + trackId);
        if ($trackable.attr('data-waschecked') === 'true') {
          opts.onCheckFn($trackable);
          $trackable.attr('data-waschecked', false);
        }
      });
    });
  }
})(jQuery);

$('input[type="radio"]').trackRadio(['id1', 'id3'], {
  onCheckFn : function($radio) {
    alert($radio.attr('id') + ' - checked');
  },
  onUncheckFn : function($radio) {
    alert($radio.attr('id') + ' - unchecked');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="shipping_method" value="1" id="id1" data-refresh="5">
<input type="radio" name="shipping_method" value="2" id="id2" data-refresh="5">
<input type="radio" name="shipping_method" value="3" id="id3" data-refresh="5">