根据使用jquery / javascript选择的复选框更新URL而不重新加载 [英] Update url without reloading depending on the checkbox(es) selected using jquery/javascript

问题描述

这是一个2部分问题：

我有两个部分带复选框。

I have 2 sections with checkboxes.

1. 我需要更新网址，具体取决于所选的复选框


2. 我需要共享更新的网址，该网页会在页面加载时选中特定的复选框打开

我已经使用了html代码制作了一个jsfiddle： https://jsfiddle.net/yh2ugbj8/5/

I have made a jsfiddle with the html code in it: https://jsfiddle.net/yh2ugbj8/5/

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

推荐答案

我建议使用 location.hash 因此您可以在不离开页面的情况下将额外信息添加到网址。此信息也可以在链接中提供，以便您在首次导航到页面时检查所选元素...

I'd recommend using location.hash so you can add the extra information to the url without navigating away from the page. This info can also be given in a link so you can check the selected elements when you first navigate to the page...

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>

Javascript

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

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

Here's an updated fiddle where the page url has the values added to the hash...

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

正如您所看到的，我在脚本顶部添加了一行来模仿访问页面并添加了哈希值。

As you can see I added a line at the top of the script to mimic visiting the page with the hash value appended to it.

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

I also removed the IDs and added classes to the checkboxes, just for the sake of not making ugly jQuery selectors.

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

Note: I added the alert to show the location because you won't see the fiddle example changing the url, due to the fact that the 4 panels are all iframes.

这篇关于根据使用jquery / javascript选择的复选框更新URL而不重新加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！