60 lines
1.6 KiB
JavaScript
60 lines
1.6 KiB
JavaScript
// 1.- que al cargar la página todos los checkbox esten es su modo uncheck y las tarjetas esten en modo display none
|
|
|
|
let checkBox = document.querySelectorAll("input.form-check-input");
|
|
|
|
function btn_checkBox(keySelector) {
|
|
|
|
let btn = document.getElementById(`${keySelector}`);
|
|
let lst_cards = document.querySelectorAll(`div.${keySelector}`);
|
|
|
|
btn.addEventListener("click", () => {
|
|
if (btn.checked) {
|
|
lst_cards.forEach(card => {
|
|
card.style.display = "inline";
|
|
new_posts_localStorage(keySelector, "checked")
|
|
});
|
|
} else {
|
|
lst_cards.forEach(card => {
|
|
card.style.display = "none";
|
|
new_posts_localStorage(keySelector, "unchecked")
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
for (let i = 0; i < checkBox.length; i++) {
|
|
btn_checkBox(checkBox[i].id);
|
|
}
|
|
|
|
function new_posts_localStorage(id, status) {
|
|
if (localStorage != null) {
|
|
localStorage.setItem(id, status);
|
|
}
|
|
}
|
|
|
|
// autoseleccionado o deseleccionado de los elementos
|
|
(() => {
|
|
if (localStorage != null) {
|
|
// deseleccionar los checkbox
|
|
for (let i = 0; i < localStorage.length; i++) {
|
|
let key = localStorage.key(i);
|
|
let value = localStorage.getItem(key);
|
|
let chkbox = document.getElementById(key);
|
|
if (value == 'unchecked') {
|
|
chkbox.checked = false;
|
|
let lst_cards = document.querySelectorAll(`div.${key}`);
|
|
lst_cards.forEach(card => {
|
|
card.style.display = "none";
|
|
});
|
|
} else if (value == "checked") {
|
|
chkbox.checked = true;
|
|
let lst_cards = document.querySelectorAll(`div.${key}`);
|
|
lst_cards.forEach(card => {
|
|
card.style.display = "inline";
|
|
});
|
|
}
|
|
}
|
|
}
|
|
})();
|
|
|