如何在重新加载页面时也显示所有选中的复选框？

Posted 2023-05-09

【中文标题】如何在重新加载页面时也显示所有选中的复选框？

【英文标题】：How to show all checked checkboxes also at reloading the page?

【发布时间】：2019-04-30 05:02:42

【问题描述】：

我有一个问题：我的网站正在使用 javascript 搜索选中的复选框。

$(function () 
    var $allELements           = $('.input-box');
    var $selectedElementsListing = $('#selectedElements');
    var $selectedElementsLabel   = $('#selectedElementsLabel');
    var $elementInfo         = $('.elementInfo ');

    $allELements.on('click', function () 
        $selectedElementsListing .html(
            $allELements.filter(':checked').map(function (index, checkbox) 
                return '<div>' + checkbox.title + '</div>';
            ).get().join('')
        );

        if ($selectedElementsListing .text().trim().length)
        
            $selectedElementsListing .show();
            $selectedElementsLabel.show();
            $elementInfo.show();
        
    );
);

所以它在我的主页上搜索选中的复选框，并在左下角列出复选框的名称（作为用户信息）。 我的 HTML 如下所示：

<div class="elementInfo" >
        <p>
            <strong id="selectedElementsLabel" ><u>Ausgewählte
                Magazine:</u></strong><br />
            <span id="selectedElements"></span>
        </p>
</div>

它会从此输入字段中获取复选框名称：

<input class="input-box" title="[[ElementName]]" type="checkbox" id="A[[ID]]" name="ID[]"
                                       value="[[ID]]" checked="[[checked_element]]" />

当我按下重新加载时，所选复选框的信息栏没有出现。只有当我再次按下其中任何一个时，它才会显示选中的复选框（然后它会显示所有也被选中的复选框）

【参考方案1】：

每次刷新页面时，都会重新渲染 DOM，并且不会在任何地方存储任何状态。要保留选中框的状态，您可以使用 localStorage 来存储选中状态，然后在页面加载时，您可以读取 localStorage 并执行通过检查本地存储数据来检查它们的函数。

// call this every time someone checks a box
window.localStorage.setItem('some key name of data', 'some data structure with checkbox state')

//Do this every time page is loaded
window.localStorage.getItem('previously used key name')

附：我假设每次有人检查您正在保留状态的框时，您都没有调用后端 api

更多信息请联系visit understand state management的好书