根据使用jquery/javascript选择的复选框更新url而不重新加载

这是一个由两部分组成的问题：

我有两个带复选框的部分

我需要根据选中的复选框更新url

我需要共享更新的url，该url在页面加载时打开并选中特定复选框

我制作了一个JSFIDLE，其中包含html代码：

过滤器接收器：
精选蔬菜

马铃薯

洋葱

西红柿

选择调味品

盐

胡椒粉

辣椒片

您可以使用，它允许您使用历史api在现代浏览器中更改url而无需回发。您可以更深入地了解api，但最重要的一点应该记住，

pushstate

和

replacestate

的行为不同。 示例脚本可以是

$（'[type=“checkbox”]'）。在（'change'，function（）上{
var checkedVals=$（':checked'）.map（函数（）{return$（this.val（）；}）.get（）.join（）；
警报（checkedVals）；//用于调试目的
History.pushState（null，null，“？state=“+checkedVals”）；
});

过滤器接收器：
精选蔬菜

马铃薯

洋葱

西红柿

选择调味品

盐

胡椒粉

辣椒片

这可以通过两种方式实现，但如果不需要重新加载HTML5历史记录页面，那么这将是最好的选择

1） 按照注释中的建议，创建具有动态段的路由器。以下是几个不错的路由库：




（如果你在谷歌上搜索，还有很多）

2） 在初始页面加载时，确保正确选择与当前路线中的动态段相对应的ui元素。或者让服务器在渲染时加载正确的ui元素。您说过使用jquery，所以我假设这是在客户端完成的

3） 使用复选框的侦听器，使用路由库在选择和取消选择时更新url


例如：

4） 与网络上的大多数事情一样，没有一种“正确”的方式来做事。这可以通过使用查询字符串或动态段来实现。这取决于您在给定的时间和您的团队经验内，以您觉得最舒服的方式实现这些目标
 我建议使用
location.hash
，这样您就可以在不离开页面的情况下将额外信息添加到url。此信息也可以在链接中提供，这样您可以在首次导航到页面时检查所选元素

HTML

<h3>Filter recepies:</h3>

<div>
<p>Select vegetables</p>
<label><input type="checkbox" class="vegetables" value="potato"> Potato</label><br>
<label><input type="checkbox" class="vegetables" value="onion"> Onion</label><br>
<label><input type="checkbox" class="vegetables" value="tomato"> Tomato</label><br>
</div>

<div>
<p>Select seasoning</p>
<label><input type="checkbox" class="seasoning" value="salt"> Salt</label><br>
<label><input type="checkbox" class="seasoning" value="pepper"> Pepper</label><br>
<label><input type="checkbox" class="seasoning" value="chilli"> Chilli Flakes</label><br>
</div>

这里有一个更新的fiddle，其中页面url将值添加到哈希中


如您所见，我在脚本顶部添加了一行，以模拟访问附加了哈希值的页面

我还删除了ID，并将类添加到复选框中，只是为了避免生成难看的jQuery选择器

注意：我添加了警报以显示位置，因为您不会看到fiddle示例更改url，因为这4个面板都是iFrame。
您需要PHP来完成此操作，或者为每种可能性添加不同的url（总共9个）。我推荐使用PHP，因为您可以添加更多可能的组合，而无需为每个组合编写新的HTML页面。@JamesMcDowell他想更新或添加url查询参数，我猜，我要做的是将此作为一个PHP文件，使用一点jQuery ajax来说明调味品和蔬菜是什么，使用一点php来读取调味品和蔬菜，并将所选内容回送到正确的选项标记上。您可以在selectbox更改后使用重定向，并设置url参数示例，如window.location.href=window.location.hostname+'？select1='+val）；你不需要做任何重定向，也不需要离开页面去做这件事，当然你也不需要任何服务器端代码。我喜欢你的解决方案，这是很棒的@Archer。我需要使用复选框，我可以有多个选择。但是，您共享的JSFIDLE有Select下拉列表。是的，我是根据您最初的FIDLE示例工作的，而不是问题中的代码-我的错。我现在已经更新了它以使用复选框。
<h3>Filter recepies:</h3>

<div>
<p>Select vegetables</p>
<label><input type="checkbox" class="vegetables" value="potato"> Potato</label><br>
<label><input type="checkbox" class="vegetables" value="onion"> Onion</label><br>
<label><input type="checkbox" class="vegetables" value="tomato"> Tomato</label><br>
</div>

<div>
<p>Select seasoning</p>
<label><input type="checkbox" class="seasoning" value="salt"> Salt</label><br>
<label><input type="checkbox" class="seasoning" value="pepper"> Pepper</label><br>
<label><input type="checkbox" class="seasoning" value="chilli"> Chilli Flakes</label><br>
</div>

$(function() {

    $(".vegetables, .seasoning").on("change", function() {
        var hash = $(".vegetables:checked, .seasoning:checked").map(function() {
            return this.value;
        }).toArray();
        hash = hash.join("|");
        location.hash = hash;
        alert(hash);
    });

    if (location.hash !== "") {
        var hash = location.hash.substr(1).split("|");
        hash.forEach(function(value) {
            $("input[value=" + value + "]").prop("checked", true);
        });
    }
});