勾选复选框时仅将选中参数添加至URL的解决方案咨询

问题原因 #

你写的代码有两个核心问题：

1. 定义的大量变量如果没有匹配到选中的复选框，默认值是undefined，直接拼接进字符串就会把undefined/null值带到URL里
2. 手动硬编码URL转义字符、手动拼接参数的写法容错率极低，你原本的代码里甚至拼接时漏写了多个+号，语法本身就有问题

优化方案 #

我们可以按URL参数分组配置所有选项，通过数组筛选选中值，再用JS原生的URLSearchParams自动处理参数拼接和转义，完全规避空参数问题，代码也更好维护：

document.getElementById("search").onclick = function formJS() {
    // 按URL参数分组配置所有选项，后续增删改只要调整这里即可
    const paramConfig = {
        'interests-2': [
            { id: '#Animal', value: 'Animals' },
            { id: '#Ar', value: 'Art' },
            { id: '#Histor', value: 'History' },
            { id: '#Scienc', value: 'Science' },
            { id: '#Technolog', value: 'Technology' }
        ],
        'ages': [
            { id: '#Kids', value: 'Kids (Up to 7)' },
            { id: '#Tweens', value: 'Tweens (8 to 12)' },
            { id: '#Teens', value: 'Teens (13 to 17)' },
            { id: '#Adults', value: 'Adults (18+)' }
        ],
        'days-2': [
            { id: '#Today2', value: 'Today' },
            { id: '#Next7Days2', value: 'Next 7 Days' },
            { id: '#ThisMonth2', value: 'This Month' },
            { id: '#NextMonth2', value: 'Next Month' }
        ],
        'times': [
            { id: '#Morning', value: 'Morning' },
            { id: '#Afternoon', value: 'Afternoon' },
            { id: '#Evening', value: 'Evening' }
        ],
        'prices-2': [
            { id: '#firstPrice', value: '$0 — $20' },
            { id: '#secondPrice', value: '$20 — $50' },
            { id: '#thirdPrice', value: '$50+' }
        ]
    }

    const searchParams = new URLSearchParams()
    // 遍历每个参数分组，只把有选中值的参数加入URL
    for (const [paramName, options] of Object.entries(paramConfig)) {
        const selectedList = options.filter(opt => $(opt.id).is(':checked')).map(opt => opt.value)
        if (selectedList.length > 0) {
            searchParams.append(paramName, selectedList.join('|'))
        }
    }

    const targetUrl = `https://www.zyris.io/sort-and-filter?${searchParams.toString()}`
    setTimeout(() => {
        window.location.href = targetUrl
    }, 2000)
}

方案优势 #

• 自动过滤所有未选中的选项，不会出现空值、undefined混入URL的问题
• 原生URLSearchParams自动处理特殊字符转义，不需要手动写%7C、%20这类转义符，避免转义错误
• 分组配置的结构后续要新增选项、修改参数名/取值都只要调整配置部分即可，不需要写大量重复的if判断，可维护性高
• 最终生成的URL完全符合你给出的示例格式要求

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