Здравствуйте.
У меня на сайте есть чекбоксы, которые управляют видимостью соответствующих им article на той же странице. Выбрав чекбокс «X1» – я показываю в ленте посты с таким классом, а сняв чекбокс с «X2» – тут же все посты с классом X2 скрываются. Всё работает. Но если обновить страницу, то всё сбрасывается и снова показываются все article.
Я сделал сохранение позиций чекбокса в localStorage. Но это не дезактивирует сами посты. Т.е. часть чекбокосов не отмечена, но посты (article) активны.
Такая же проблема с кнопками «Отметить всё» и «Скрыть всё». Они отмечают чекбоксы, но не активируют/дезактивирует их (соответственно не скрывают посты, пока чекбокс не прожать вручную). Но это второстепенно.
Хотелось бы решить проблему с обновлением страницы. Пытался сделать костыль с добавлением класса с hidden и display:none, но тоже не получается пока.
P.S. Никакая форма не отправляется с чекбоксами. Реализовано только для отображения контента на странице.
<body>
<div>
<div class="check-group">
<ul>
<li>
<label for="x-1" class="checkbox">
<input id="x-1" class="checkbox__input" checked type="checkbox" data-check="1">
<span class="checkbox__label">X-1</span>
</label>
</li>
<li>
<label for="x-2" class="checkbox">
<input id="x-2" class="checkbox__input" checked type="checkbox" data-check="2">
<span class="checkbox__label">X-2</span>
</label>
</li>
</ul>
</div>
</div>
<input type="button" value="All" onclick="check();">
<input type="button" value="Reset" onclick="uncheck();">
<div>
<div class="zzz"><article class="xxx x-1">Text X1</article> </div>
<div class="zzz"><article class="xxx x-2">Text X2</article></div>
</div>
</body>
// Event for the checkboxes --- ID
document.getElementById('x-1').onchange = function() { hideShow ('x-1', this.checked); }
document.getElementById('x-2').onchange = function() { hideShow ('x-2', this.checked); }
// Show or hide the element with class
// Show if visible = true, otherwise hide the element
function hideShow(myClass, visible) {
[].forEach.call(document.getElementsByClassName(myClass), function (el) { el.hidden = !visible; });
}
/* Checked CB */
$('input[data-check]').on('input', function() {
let aChecked = [];
$('input[data-check]:checked').each(function() { aChecked.push($(this).data('check')); });
localStorage.setItem('CheckboxChecked', aChecked.join(';'));
localStorage.setItem('PasswordLength', $('#height_opt').val());
});
/* rec in localStorage*/
$(document).ready(function() {
if (localStorage.getItem('CheckboxChecked')) {
$('input[data-check]').prop('checked', false);
let aChecked = localStorage.getItem('CheckboxChecked').split(';');
aChecked.forEach(function(str) { $('input[data-check="' + str + '"]').prop('checked', true); });
}
if (localStorage.getItem('PasswordLength')) {
$('#height_opt').val(localStorage.getItem('PasswordLength'));
}
});
function check()
{
var check=document.getElementsByTagName('input');
for(var i=0;i<check.length;i++)
{
if(check[i].type=='checkbox')
{
check[i].checked=true;
}
}
}
function uncheck()
{
var uncheck=document.getElementsByTagName('input');
for(var i=0;i<uncheck.length;i++)
{
if(uncheck[i].type=='checkbox')
{
uncheck[i].checked=false;
}
}
}
window.onload = function(){
if ($('checkbox__input').is(':checked')){
$('xxx').addClass('xyz');
} else {
$('xxx').removeClass('xyz');
}
};
