Как показать все отмеченные флажки также при перезагрузке страницы?

Question

У меня проблема: мой веб-сайт ищет отмеченные флажки с помощью 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]]" />

Когда я нажимаю перезагрузить, информационная панель для выбранных флажков непоявляться.Он показывает отмеченные флажки, только если я нажимаю снова любой из них (тогда он показывает все, которые также были выбраны)

Answer 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')

PS IПредполагается, что у вас нет серверного API, вызывающего каждый раз, когда кто-то устанавливает флажок, в котором вы сохраняете состояние

, для получения дополнительной информации делайте посещение Хорошее чтение для понимания управления состоянием