基于复选框值的动态链接 => 取消选中复选框时出现问题，网址值成倍增加

Question

当根据值单击多个复选框时，我正在尝试在按钮上生成链接。我使用了下面的链接，它工作正常，我能够生成链接。

基于复选框值创建动态链接

问题是，当我第一次选中该复选框时，它会生成指向/collections/all/blue+green 的链接，但是当我再次选择/取消选择不同的值时，它会重复和 ADD 带有旧链接的值→到集合/所有/蓝色+绿色+蓝色+绿色

对于实时问题，请在移动设备上检查 查看 点击底部的过滤器 =>https://faaya-gifting.myshopify.com/collections/all

$("input[type=checkbox]").on("change", function() {
var arr = []
$(":checkbox").each(function() {
if ($(this).is(":checked")) {
arr.push($(this).val())
}
})
var vals = arr.join(",")
var str = "http://example.com/?subject=Products&checked=" + vals
console.log(str);
if (vals.length > 0) {
$('.link').html($('<a>', {
href: str,
text: str
}));
} else {
$('.link').html('');
}
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="checkbox" name="selected" value="Blue" class="products"> Blue<br>
<input type="checkbox" name="selected" value="Green" class="products"> Green<br>
<input type="checkbox" name="selected" value="Purple" class="products"> Purple
<br>
<span class="link"></span>

对于实时问题，请在移动设备上检查视图，单击底部的过滤器=> https://faaya-gifting.myshopify.com/collections/all

Answer 1

我明白现在发生了什么。导致重复的实际上是具有检查值的多个checkboxes。

如果在控制台中运行此代码，则应看到已检查两次项的长度：

// Run this in your browser console
$('input[type=checkbox]:checked').length

例如，如果我Wood和Metal选中并单击Apply，运行上面的代码会给出4的长度，而不仅仅是 2。这意味着，每个筛选器都有一个重复的checkbox输入隐藏在代码中的某个位置。我已经验证了这一点。

作为选项，您可以：

1. 尝试删除重复的复选框输入 - 最佳选项;或
2. 添加类以将选择器缩小到仅checkbox input containers之一。

以下是正在发生的事情的屏幕共享：https://www.loom.com/share/2f7880ec3435427a8378050c7bf6a6ea

2020/06/09更新： 如果实际上无法修改过滤器的显示方式，或添加类来缩小范围，我们可以选择一个ad hoc解决方案，即实际上只需删除重复项：

// get all your values
var arr = []
$(":checkbox").each(function() {
if ($(this).is(":checked")) {
arr.push($(this).val().toLowerCase())
}
})
// removes duplicates
var set = new Set(arr)
// convert to array and join
var vals = [...set].join(",")

Answer 2

我在jquery中有点糟糕。我做的对吗？

我应该只添加我在下面写的脚本吗

$("input[type=checkbox]").on("change", function() {
var arr = []
$(":checkbox").each(function() {
if ($(this).is(":checked")) {
arr.push($(this).val().toLowerCase())
}
})
// removes duplicates
var set = new Set(arr)
// convert to array and join
var vals = [...set].join(",")
var str = "http://example.com/?subject=Products&checked=" + vals
console.log(str);
if (vals.length > 0) {
$('.link').html($('<a>', {
href: str,
text: str
}));
} else {
$('.link').html('');
}
})

我说的对吗？

或者我应该在var set = new Set(arr)或var vals = [...set]上添加任何值

谢谢你的帮助阿尔杰夫