Здравствуйте. Ранее я создавал здесь тему о checkbox по БЭМ, что бы при клике присваивались нужные классы нужному дом элементу. Вот так выглядит разметка о чекбоксе:
<label class="checkbox checkbox--size-l">
<span class="checkbox__box">
<input class="checkbox__control" type="checkbox" autocomplete="off">
</span>
<span class="checkbox__text" role="presentation">
Профессиональный<sup>1</sup>
</span>
</label>
При активации чекбокса элементу с классом checkbox(в данном случае это тэг label)добавляется класс-модификатор checkbox--checked и вся стилизация задается через этот класс. Вот код, который этим управляет:
$(function() {
$(".checkbox__control").on("change", function(event) {
var chekcbox = this;
if(chekcbox.checked) $(chekcbox).closest(".checkbox").addClass('checkbox--checked');
else $(chekcbox).closest(".checkbox").removeClass('checkbox--checked');
});
});
Подскажите, как можно сохранить уже включенные чекбоксы при обновлении страницы. Объясню на конкретной задаче - на сайте есть фильтрация, фильтры активируются по чекбоксам, после обновления страницы выборка по фильтрам сохраняется, но стилизация чекбокса пропадает, потому что при обновлении страницы пропадают классы, отвечающие за стили оформления активного чекбокса.
То есть, при активации чекбокса тэгу-родителю (!не чекбоксу) добавляется класс, который нужно сохранить при обновлении страницы, вот разметка активированного чекбокса:
<label class="checkbox checkbox--size-l checkbox--checked">
<span class="checkbox__box">
<input class="checkbox__control" type="checkbox" autocomplete="off">
</span>
<span class="checkbox__text" role="presentation">
Профессиональный<sup>1</sup>
</span>
</label>
Наверно для этого подойдет кука? Не подскажете как такое можно реализовать?
