How to render active the checkboxes after the page is reloaded?

1) I selected the correct checkbox
2) pressed the "apply" button
3) the page to reload
4) active checkboxes remain, but the name is a "label" not rendered in a separate block
5) if I click on any checkbox, then all checkbox active rendered

After rendering the checkboxes to all active labels and render them at #unit. I get them,

var checkboxes = $('input[type=checkbox]:checked');

but display can't

Please help, thanks

$(document).ready(function() {
  checkbox = $('.ctf--b-filt-check-list :checkbox').on('change', function() {
    $('#unit').empty();
    var count = 0;
    $('.ctf--b-filt-c-item').map(function(i, el) {
      let unit = $(this).find('input:checked').map(function(i, el) {
        return ('<div class="ctf-b-btn-filter-items">' + $('[for="' + el.id + '"]').text() + '</div>');
      }).get();
      if (unit.length > 0) {
        count += unit.length;
        $('#unit').append('<div class="father father_tmp">' + $(this).find('.b-txt').text() + '</div>');
        $('#unit').find('.father_tmp').append(unit.join(''));
        $('.father_tmp').removeClass('father_tmp');
      }
    });
  });

});

.father {
  width: 500px;
  height: 100%;
  font-size: 12px;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 10px;
}

.ctf-b-btn-filter-items {
  padding: 2px;
  width: 100;
  height: 100%;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: #ffffff;
  border-radius: 2px;
  background: #35aaed;
  background: linear-gradient(to bottom, #35aaed 0%, #0b80c4 100%);
  text-align: center;
  display: inline-block;
  vertical-align: top;
  margin: 0 5px 0 0;
}

<script src="http://ift.tt/1oMJErh"></script>
<div class="ctf--b-filt-c-item open ctf--b-filt-c-item--active">
  <div class="ctf--b-filt-c-head"><span class="b-txt">Единица измерения:</span></div>
  <div class="ctf--b-filt-c-body" style="display: block;">
    <div class="ctf--b-wpr-scr">
      <ul class="ctf--b-filt-check-list ctf--b-filt-check-list--double">
        <li>
          <input type="checkbox" id="idchkk_2_0_0" value="11770">
          <label for="idchkk_2_0_0" data="text">
                        <i></i>
                        Килограмм
                    </label>
        </li>
        <li>
          <input type="checkbox" id="idchkk_2_0_1" value="11771">
          <label for="idchkk_2_0_1" data="text">
                        <i></i>
                        Тонна
                    </label>
        </li>
      </ul>
      <ul class="ctf--b-filt-check-list ctf--b-filt-check-list--double">
      </ul>
    </div>
  </div>
</div>


<div class="ctf--b-filt-c-item open ctf--b-filt-c-item--active">
  <div class="ctf--b-filt-c-head"><span class="b-txt">Полярность:</span></div>
  <div class="ctf--b-filt-c-body" style="display: block;">
    <div class="ctf--b-wpr-scr">
      <ul class="ctf--b-filt-check-list ">
        <li>
          <input type="checkbox" id="idchkk_2_2_0" value="11773">
          <label for="idchkk_2_2_0" data="polarity">
                        <i></i>
                        Обратная
                    </label>
        </li>
        <li>
          <input type="checkbox" id="idchkk_2_2_1" value="11776">
          <label for="idchkk_2_2_1" data="polarity">
                        <i></i>
                        Прямая
                    </label>
        </li>
      </ul>
    </div>
  </div>
</div>

<div id="count"></div>
<div id="unit"></div>