Как исключить повторяющиеся значения, взятые из флажка ввода и радио

Question

Я создаю многоступенчатую форму, и последний шаг - это сводный шаг, на котором я получаю значения из предыдущего шага и отображаю. После нажатия кнопки сводки функция получает значения, но когда кто-то щелкает предыдущее и что-то меняет, значения дублируются. Итак, мой вопрос: как исключить повторяющиеся значения, взятые из флажка ввода и радио?

var wybraneProdukty = [];

$('input.produkty').change(function() {
  wybraneProdukty = [];
  
  $('input.produkty').each(function(i, item) {
    if ($(item).is(':checked')) {
      wybraneProdukty.push($(item).val());
    }
  });
  
  console.log("checkedAttr:", wybraneProdukty);
});

$('form #next_btn_jedzenie').click(function() {
  jQuery.each(wybraneProdukty, function(i, val) {
    $('#podsumowanie-produkty').append('<span>' + val + '</span></br>');
  });
  
  $('#podsumowanie-wejscia').append('<span>' + $("input[name=wejscie]:checked").val() + '</span>');
  $('#podsumowanie-toaleta-pracownicy').append('<span>' + $("input[name=toaleta_pracownik]:checked").val() + '</span>');
  $('#podsumowanie-toaleta-klient').append('<span>' + $("input[name=toaleta_klient]:checked").val() + '</span>');
  $('#podsumowanie-zmywalnia').append('<span>' + $("input[name=zmywalnia]:checked").val() + '</span>');
  $('#podsumowanie-jedzenie').append('<span>' + $("input[name=jedzenie]:checked").val() + '</span>');
});

Answer 1

Есть несколько проблем с тем, как ваш код в настоящее время работает.

Сначала вы добавляете значения ваших флажков в массив wybraneProdukty, когда они отмечены, но вы не удаляете их когда они не отмечены. Таким образом, ваша проблема с дубликатами также может возникнуть, когда кто-то проверяет, снимает отметки, а затем повторно проверяет элемент.

Из того, что я вижу в вашем примере кода, я думаю, что вы можете полностью исключить массив wybraneProdukty и просто работайте со значениями входных данных.

Итак, в обработчике нажатия кнопки, где у вас есть:

jQuery.each(wybraneProdukty, function(i, val) {
  $('#podsumowanie-produkty').append('<span>' + val + '</span></br>');
});

Измените это на что-то вроде:

$('input.produkty').each(function(i, item) {
  if ($(item).is(':checked')) {
    $('#podsumowanie-produkty').append('<span>' + $(item).val() + '</span></br>');
  }
});