How to show all checked checkboxes also at reloading the page?

I have a problem: my website is searching for checked checkboxes with a 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();
        }
    });
});

So it is searching for checked checkboxes on my main page and is listing the name of the checkboxes on the lower left hand side (as information for the user). My HTML looks like this:

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

And it takes the checkbox names from this input field:

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