勾选第二个多选框时对应参数未与第一个多选框参数共同追加到URL的问题

嘿，看起来你这段代码是想实现选中Brand和Origin的多选框后，把它们的参数一起拼到URL里，但现在遇到了第二个组（Origin）的参数没法和Brand一起追加的问题对吧？我帮你梳理下代码里的问题，再给你修正方案~

首先先把你贴的不完整代码列出来，方便分析：

$(document).ready(function () {
    $('input[type=checkbox]').click(function (e) {
        var seasoning = '', tempArray = [];
        $('input[name="Brand[]"]:checked').each(function(){
            tempArray.push($(this).val());
        })
        if(tempArray.length !== 0){
           seasoning+='&Brand='+tempArray.toString();
           tempArray = [];
        }
        $('input[name="Origin[]"]:checked').each(function(){
            tempArray.push($(this).val());
        })
        // 这里你的代码没写完，缺少Origin参数的拼接逻辑和代码闭合
    })
})

先说说你代码里的核心问题： #

• 代码不完整导致执行报错：第二个each循环没有闭合的}和)，整个点击事件函数、甚至$(document).ready的函数体都没写完，浏览器直接会报语法错误，代码根本跑不起来，Origin的参数自然没法被处理。
• 参数拼接逻辑缺失：就算代码能跑，你处理完Origin的选中值后，完全没把这些值拼到seasoning变量里，所以Origin的参数根本不会出现在最终的URL里。
• 复用数组容易出问题：你用同一个tempArray来存Brand和Origin的选中值，清空后再存Origin，虽然这里逻辑上没问题，但分开定义数组会更清晰，避免后续修改时出错。

给你两个修正后的方案，按需选就行： #

方案一：保持你原有参数格式（逗号分隔多选值）

这个方案延续你原本的思路，把每个组的选中值用逗号拼起来，再生成URL参数：

$(document).ready(function () {
    $('input[type=checkbox]').click(function (e) {
        var seasoning = '';
        
        // 处理Brand选中值
        const brandValues = [];
        $('input[name="Brand[]"]:checked').each(function() {
            brandValues.push($(this).val());
        });
        if (brandValues.length > 0) {
            seasoning += `&Brand=${brandValues.join(',')}`;
        }

        // 处理Origin选中值
        const originValues = [];
        $('input[name="Origin[]"]:checked').each(function() {
            originValues.push($(this).val());
        });
        if (originValues.length > 0) {
            seasoning += `&Origin=${originValues.join(',')}`;
        }

        // 生成完整URL（这里以当前页面URL为例）
        const baseUrl = window.location.href.split('?')[0];
        // 去掉参数串开头的&，如果有参数的话用?拼接
        const fullUrl = baseUrl + (seasoning ? `?${seasoning.slice(1)}` : '');
        
        // 这里可以做你需要的操作，比如打印预览或者跳转
        console.log(fullUrl);
        // window.location.href = fullUrl; // 如果要跳转的话解开注释
    });
});

方案二：用更规范的数组参数格式（推荐）

如果你希望后端能更方便地解析多选值（比如直接拿到数组），可以用jQuery的$.param()来生成标准的URL参数，这种方式也能避免手动拼接的错误：

$(document).ready(function () {
    $('input[type=checkbox]').click(function (e) {
        const params = {};

        // 用map快速收集Brand选中值
        const brandValues = $('input[name="Brand[]"]:checked').map(function() {
            return $(this).val();
        }).get();
        if (brandValues.length > 0) {
            params.Brand = brandValues;
        }

        // 同理收集Origin选中值
        const originValues = $('input[name="Origin[]"]:checked').map(function() {
            return $(this).val();
        }).get();
        if (originValues.length > 0) {
            params.Origin = originValues;
        }

        // 生成标准参数串
        const paramString = $.param(params);
        const baseUrl = window.location.href.split('?')[0];
        const fullUrl = baseUrl + (paramString ? `?${paramString}` : '');
        
        console.log(fullUrl);
        // window.location.href = fullUrl;
    });
});

最后再提几个小注意点： #

• 确保你的多选框name属性确实是Brand[]和Origin[]，和代码里的选择器完全匹配，不然选不到元素就白搭了。
• 每次点击都要重新生成完整的参数串，不要在现有URL上追加，否则多次点击会导致参数重复堆积。
• 如果你的页面有表单，其实可以直接用表单提交的方式来传参数，不用手动拼URL，会更省心~

备注：内容来源于stack exchange，提问作者Rashami