使用jQuery获取复选框多个值时出现重复值该如何解决？

问题原因 #

你当前代码出现值重复的核心原因是fruit_temp数组每次复选框触发change事件时，都没有清空之前存储的旧值，而是直接将当前所有选中项追加到数组末尾。
实际触发逻辑：

• 第一次选中Apple，change事件触发，数组变为['Apple']
• 后续再选中Manggo，change事件再次触发，又会把当前两个选中值都push进去，数组就变成了['Apple', 'Apple', 'Manggo']，就是你遇到的重复问题。

修复方案 #

不需要调整收集逻辑的位置，只需要在每次遍历选中项之前清空旧数组即可，修改后的JS代码如下：

let fruit_temp = [];
$('input[name="chk_fruit"]').change(function() {
  // 每次触发change事件先清空之前存储的旧值
  fruit_temp = [];
  $('input[name="chk_fruit"]:checked').each(function() {
    fruit_temp.push($(this).val());
  });
});

const submit = () => {
  let formData = new FormData();
  //more formData
  formData.append('Fruit', fruit_temp);

  for (var pair of formData.entries()) {
    console.log(pair[0] + ', ' + pair[1]);
  }
}

可选优化方案 #

如果存在其他操作也会修改fruit_temp的场景，担心清空逻辑有遗漏，也可以在push完成后对数组做去重处理：

$('input[name="chk_fruit"]:checked').each(function() {
  fruit_temp.push($(this).val());
});
// 对数组去重
fruit_temp = [...new Set(fruit_temp)]

内容的提问来源于stack exchange，提问作者nonutt