javascript - 在保存复选框状态时选择复选框时将查询字符串附加到 url 的最佳方法？

Question

我正在制作一个 list 表单，目前我可以将所选框的值附加到网址，我觉得这种方式效率低下，主要问题是复选框的状态也不会保存，因此用户看不到他们选中或取消选中的内容。

这是html代码

<form id="carForm" method="get">
    <label>BMW</label>
    <input type="checkbox"  value="bmw" onChange="checkboxChanged()">
    <label>mercedes</label>
    <input type="checkbox"  value="mercedes" onChange="checkboxChanged()">
    <label>honda</label>
    <input type="checkbox"  value="honda" onChange="checkboxChanged()">
    <label>toyota</label>
    <input type="checkbox"  value="toyota" onChange="checkboxChanged()">
</form>

这是创建 url 的脚本

让 form = document.getElementById("carForm")

        let checkboxes = document.getElementsByTagName("input")
       var vals = "";

       let formSubmit = () => {               
           for (var i=0, n=checkboxes.length;i<n;i++) 
           {
               if (checkboxes[i].checked) 
               {
                   vals = checkboxes[i].value
                   // append checkbox values to url   
                   var url = window.location.href; 
                    if (url.indexOf('?') > -1){
                    // if a paramter already exists, append using 
                    url += `&make=${vals}`
                    }else{
                    url += `?make=${vals}`
                    }
                    window.location.href = url;
                }
                console.log(vals);
            }
    }

    function checkboxChanged() {
        formSubmit()
        }     
</script>

例如，如果选择了 kia 和 honda，则 url 将是

/inventory?make=kia&make=honda

因此，如果这效率低下，那么更好的方法是什么以及如何确保重新加载页面后保留复选框状态我在服务器端使用nodejs/expressjs和ejs

Answer 1

var makes=[];
...
for (var i=0;i<checkboxes.length;i++) {
  if (checkboxes[i].checked) makes.push(checkboxes[i].value);
}
...
url+='&makes='+makes.join(',');

这将为您提供一个逗号分隔的列表；您可以在服务器端对其进行字符串拆分。