时间戳

首页 > 解决方案 > 如何排除从输入复选框和单选中获取的重复值

html - 如何排除从输入复选框和单选中获取的重复值

问题描述

我制作了多步表单，最后一步是汇总步骤，在其中我从上一步中获取值并显示。单击摘要按钮功能获取值后，但是当有人单击上一个并更改某些值时，值是重复的。所以我的问题是如何排除从输入复选框和单选中获取的重复值？

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>');
});

标签： htmljquery

解决方案

您的代码当前的工作方式存在一些问题。

首先，您在选中复选框时将它们的值添加到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>');
  }
});

推荐阅读