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

Question

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

这是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>

这是制作网址的脚本

let 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>

例如，如果选择了起亚和本田，则 url 将是

/inventory?make=kia&make=honda

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

Answer 1

你应该看看URLSearchParams。使用它，您可以执行以下操作：

const searchParams = new URLSearchParams(location.search);
document.querySelector('input[type=checkbox]').forEach(cb => {
  if (cb.checked) {
    searchParams.append('make', cb.value)
  }
});
location.href = location.href.replace(location.search, '?' + searchParams.toString())

Answer 2

如果您可以访问服务器端语言，例如 PHP，请使用它来检查 URL 并在页面加载时自动选中复选框。大致如下：

<?php
$bools = [
 "kia" => isset($_GET['kia']),
 "bmw" => isset($_GET['bmw']),
 "mercedes" => isset($_GET['mercedes']),
 "toyota" => isset($_GET['toyota'])
];
?>
<form id="carForm" method="get">
  <label>BMW</label>
  <input type="checkbox" value="bmw" onChange="checkboxChanged()" <?= $bools['bmw'] ? 'checked' : '' ?>>
  <label>mercedes</label>
  <input type="checkbox" value="mercedes" onChange="checkboxChanged()" <?= $bools['mercedes'] ? 'checked' : '' ?>>
  <label>honda</label>
  <input type="checkbox" value="honda" onChange="checkboxChanged()" <?= $bools['honda'] ? 'checked' : '' ?>>
  <label>toyota</label>
  <input type="checkbox" value="toyota" onChange="checkboxChanged()" <?= $bools['toyota'] ? 'checked' : '' ?>>
</form>

专业提示：在 PHP 中，您可以使用 value="car[]" 来提交在 PHP 中已经是 array 类型的值数组！

---

如果您没有可以访问服务器端，或者您不想使用它，请检查页面加载时的 URL：

window.onload = () => {
  for (const el of checkboxes) {
    // Check the URL's params:
    // From link below
    const urlParams = new URLSearchParams(window.location.search);
    const myParam = urlParams.get(el.value);

    if (myParam != null) {
      el.checked = true;
    }
  }
}

（Get URL params reference，比我使用的支持更好的选项更多。我只是使用了最简单的选项）

Answer 3

我认为你不应该将 url 的所有参数都定义为 make=...，而是使用 ${vals}=checked。然后您可以使用 php 轻松阅读它并检查已定义的名称，但您必须为您的 chackbox 定义一个名称。

对不起，我的英语很接近，我是瑞士人，会说法语。

Answer 4

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

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