更新 url 而不重新加载，具体取决于使用 jquery/javascript 选择的复选框

我建议使用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>

爪哇语

$(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);
        });
    }
});

这是一个更新的小提琴，其中页面网址将值添加到哈希中......

https://jsfiddle.net/yh2ugbj8/6/

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

我还删除了 ID 并在复选框中添加了类，只是为了不制作丑陋的 jQuery 选择器。

注意：我添加了警报以显示位置，因为您不会看到小提琴示例更改 url，因为 4 个面板都是 iframe。

历史记录.js，它使您能够使用历史记录 API 在现代浏览器中更改 url，而无需回发。您可以更深入地了解 api，但您应该记住的最重要的一点是，pushstate 和 replacestate 的行为不同。示例脚本可以是;

$('[type="checkbox"]').on('change', function(){
  var checkedVals = $(':checked').map(function(){ return $(this).val(); }).get().join();
  alert(checkedVals); //for debugging purposes
  History.pushState(null, null, "?state=" + checkedVals);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Filter recepies:</h3>
<div>
<p>Select vegetables</p>
<label><input type="checkbox" id="cbox1" value="potato"> Potato</label><br>
<label><input type="checkbox" id="cbox2" value="onion"> Onion</label><br>
<label><input type="checkbox" id="cbox3" value="tomato"> Tomato</label><br>
</div>
<div>
<p>Select seasoning</p>
<label><input type="checkbox" id="cbox1" value="salt"> Salt</label><br>
<label><input type="checkbox" id="cbox2" value="pepper"> Pepper</label><br>
<label><input type="checkbox" id="cbox3" value="chilli"> Chilli Flakes</label><br>
</div>

这可以通过几种方式完成，但要求没有页面重新加载HTML5历史记录将是你最好的选择。

1） 如评论中所建议的，创建具有动态分段的路由器。以下是几个不错的路由库：

• https://visionmedia.github.io/page.js/
• http://backbonejs.org/#Router
• （如果你谷歌还有更多）

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

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

• 示例：https://api.jquery.com/change/

4）就像网络上的大多数事情一样，没有一种"正确"的做事方式。这可以使用查询字符串或动态段来完成。由您来实施它们，让您在给定和团队经历的时间内最舒服地将其交付出去。