Блог

У меня есть группа флажков для функции фильтрации, которая запускает некоторую функцию при нажатии на них. Мне нужно реализовать один флажок, установленный за раз, что не является проблемой, но мне нужно вызвать событие щелчка или изменения при ранее установленном флажке, поскольку изменение «prop» не вызвало никакого события.

  <input type="checkbox" data-filter="threebed" class="bedroomsCheck" name="bedrooms" value="three">
 <input type="checkbox" data-filter="fourbed" class="bedroomsCheck" name="bedrooms" value="four">
 <input type="checkbox" data-filter="fivebed" class="bedroomsCheck" name="bedrooms" value="five">
 

Мой подход, который не давал соответствующего вывода о функциональности фильтрации.

   $(document).on('click', '.bedroomsCheck', function() { 

      $('.bedroomsCheck').not(this).prop('checked', false);
      $('.bedroomsCheck').each( function (){
            if(!(this) amp;amp; is(':checked')){

               //how do I target the one that meets condition?

             }
      });
 });

 //This didn't work either
 $('.hometypeCheck').not(this).prop('checked', false).trigger('change');   //click, change
 

Попробуйте так:

 var clicked;

$('.bedroomsCheck').on('click', function() {
  clicked = $(this);

  if ($(this).is(':checked')) {
    $('.bedroomsCheck:checked').not($(this)).each(function() {
      $(this).prop('checked', false);
      $(this).trigger('change');
    });
  };
});

$('.bedroomsCheck').on('change', function() {
  if (!clicked.is($(this))) {
    //do something useful here
    console.log($(this).val()   ' changed');
  };
}); 

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

<input type="checkbox" data-filter="threebed" class="bedroomsCheck" name="bedrooms" value="three">
<input type="checkbox" data-filter="fourbed" class="bedroomsCheck" name="bedrooms" value="four">
<input type="checkbox" data-filter="fivebed" class="bedroomsCheck" name="bedrooms" value="five"> 

1. В этом click случае запомните, какой ввод был нажат последним ( clicked переменная).
2. Если выбранный ввод становится проверенным, измените все остальные отмеченные входные данные на непроверенные и запустите их событие изменения (их можно выбрать с помощью $('.bedroomsCheck:checked').not($(this)) )
3. В change случае, проверьте, является ли изменяющийся элемент clicked , и выполните полезные действия, если нет.

Это не очень умно, но установите change обработчик для каждого флажка и инициализируйте переменную, чтобы отслеживать последний флажок. Это начинается undefined . Когда флажок установлен, пройдите через все флажки и снимите их. Затем вызовите функцию триггера или вызовите событие или еще что-то для последнего отмеченного флажка (в первый раз это будет undefined , поскольку никто не был отмечен последним). Отметьте текущий флажок как установленный, затем поместите ссылку на него в last переменную, чтобы подготовиться к следующему обходу.

 const checkboxes = document.querySelectorAll("input");
checkboxes.forEach(checkbox => checkbox.addEventListener("change", checked));

let last;

function checked(event) {
  checkboxes.forEach(checkbox => checkbox.checked = false);
  trigger(last);
  event.target.checked = true;
  last = event.target;
}

function trigger(el) {
  if (el) console.log(el);
} 

 <input type="checkbox" data-filter="threebed" class="bedroomsCheck" name="bedrooms" value="three">
<input type="checkbox" data-filter="fourbed" class="bedroomsCheck" name="bedrooms" value="four">
<input type="checkbox" data-filter="fivebed" class="bedroomsCheck" name="bedrooms" value="five">