在 URL 中显示复选框值

Question

我有一个使用 Ajax 进行查询的页面。此页面上的复选框无需任何 URL 即可工作。我想要做的是能够使用 URL 加载此数据。所以当我在 url 中输入一个值时，我希望该数据自动出现。

$checkboxes = $('input[type=checkbox');
$checkboxes.change(function(){
    window.location.hash = 'marka=' + $checkboxes.filter(':checked').map(function(){
        return this.value;   
    }).get().join(",");
    console.log(window.location.hash);
});
 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <div class="custom-control custom-checkbox">
 <input class="custom-control-input common_selector marka" type="checkbox" id="marka_1" value="1">
 <label class="custom-control-label cz-filter-item-text" for="marka_1">Value 1 </label>
 <input class="custom-control-input common_selector marka" type="checkbox" id="marka_2" value="2">
 <label class="custom-control-label cz-filter-item-text" for="marka_21">Value 2 </label>
 <input class="custom-control-input common_selector marka" type="checkbox" id="marka_3" value="3">
 <label class="custom-control-label cz-filter-item-text" for="marka_3">Value 3 </label>
 <input class="custom-control-input common_selector marka" type="checkbox" id="marka_4" value="4">
 <label class="custom-control-label cz-filter-item-text" for="marka_4">Value 4 </label>
  </div>

我想通过 URL 加载数据

Answer 1

如果我理解正确，您希望将复选框状态保存到散列中，然后在有人访问散列中包含复选框信息的 URL 时再次加载它。

您已经有了将复选框状态保存到哈希的代码。您使用的是简单的逗号分隔列表，例如 #marka=2,4。加载数据很简单：

• 用window.location.hash读取哈希；
• 删除#；
• 删除marka=，这样您就只剩下value已选中的复选框；
• 创建一个包含剩余值的数组；
• 遍历所有复选框并检查其值在该数组中的复选框；

是这样的：

function loadCheckboxState() {
    // Get the hash, and remove the '#', we are left with marka=2,4
    let string = window.location.hash.substring(1);

    // Remove 'marka=', so we are left with 2,4
    string.replace('marka=', '');

    // Create an array of the ids left, [2,4]
    let checked = string.split(',');

    // Now check the checkboxes whose value is in the array
    $checkboxes.prop('checked', function () {
        return checked.indexOf(this.value) >= 0;
    });
}

您可以在页面加载时运行它，例如：

$(document).ready(function() {
    loadCheckboxState();
});

请注意，您的代码中存在一些小问题：

• jQuery 1.9.1 很古老（2013 年！），您应该使用更新的版本；

• 错别字：$('input[type=checkbox')；

• 错别字：for="marka_21"；

• Use var (or let) 来声明你的变量；

更新

添加代码作为可运行的 sn-p - 请注意，由于 Stackoverflow sn-ps 的嵌入方式，它在这里不起作用。

$(document).ready(function() {
    // Load checkbox state from hash on page load
    loadCheckboxState();

    // When a checkbox is changed, update the hash
    $checkboxes.change(saveCheckboxState);    
});

let $checkboxes = $('input[type=checkbox]');
let $link = $('#link');
let SOurl = 'https://stackoverflow.com/questions/74428447/show-checkbox-value-in-url';

// This will save checkbox state in the hash
function saveCheckboxState() {
    window.location.hash = 'marka=' + $checkboxes.filter(':checked').map(function () {
        return this.value;
    }).get().join(",");

    // Just for debugging, show it on the page
    let link = SOurl + window.location.hash;
    $link.attr('href', link).html(link);
}

function loadCheckboxState() {
    // Get the hash, and remove the '#', we are left with marka=2,4
    let string = window.location.hash.substring(1);

    // Remove 'marka=', so we are left with 2,4
    string.replace('marka=', '');

    // Create an array of the ids left, [2,4]
    let checked = string.split(',');

    // Now check the checkboxes whose value is in the array
    $checkboxes.prop('checked', function () {
        return checked.indexOf(this.value) >= 0;
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="">
    <input class="" type="checkbox" id="marka_1" value="1">
    <label class="" for="marka_1">Value 1 </label>
    <input class="" type="checkbox" id="marka_2" value="2">
    <label class="" for="marka_2">Value 2 </label>
    <input class="" type="checkbox" id="marka_3" value="3">
    <label class="" for="marka_3">Value 3 </label>
    <input class="" type="checkbox" id="marka_4" value="4">
    <label class="" for="marka_4">Value 4 </label>
</div>

<p>Generated link: <a id="link"></a>