Множество значений флажков и значение флажка «все флажки» сохраняются с помощью localalstorage - PullRequest
Новая
       17

Множество значений флажков и значение флажка «все флажки» сохраняются с помощью localalstorage

0 голосов
/ 22 сентября 2018

Я настроил localstorage, чтобы сохранить значение моих флажков и имею функцию «проверить все» и «снять все».Я пытаюсь реализовать способ отображения только отмеченных элементов, когда установлен определенный флажок, отдельный от группы флажков «проверить все».Проблема, с которой я столкнулся, заключается в сохранении значения этого флажка в localalstorage.Я вижу в консоли, что мои formValues флажки, а также мой отдельный флажок showHide сохранены в localstorage.Я просто ошарашен на шоу и скрываю функциональность, работая с проверкой всех функциональных возможностей.

Приложение: Проблемы

  1. состояниефлажок $show, кажется, правильно сохранен в localalstorage (в консоли), но функции fadeout и FadeIn не отображаются при перезагрузке страницы.

  2. Если я сниму флажок и затем установлю флажок «Показать флажок», непроверенный элемент div будет скрыт, как и должно быть, но когда я затем нажму кнопку «Проверить все» (которая устанавливает)Show Checked "в false), что скрытый (непроверенный) div не изменяется на флажок, а затем показывает.

Кажется, моя проблема заключается не столько в сохранении состояния флажка, поскольку это кажетсяработать в локальном хранилище, но с добавлением и удалением класса «hidden-print», когда флажок установлен и страница перезагружается.Консоль показывает, что класс не добавлен в флажок сохранения отмечен.

Я понимаю, что это может сбивать с толку, и я, возможно, пытаюсь сделать многое с проверкой всех и скрытием div.Любая помощь или направление приветствуется!

Вот кодекс 

var formValues = JSON.parse(localStorage.getItem("formValues")) || {};
var showHide = JSON.parse(localStorage.getItem("showHide")) || {};
var $checkboxes = $("#checkbox-container input.drug");
var $button = $("#checkbox-container .checkall");
var $show = $("#checkbox-container #hideDrugs");

if ($show.prop('checked', true)) {
  $('.Rtable-row.hidden-print').fadeOut(200);
} else {
  $('.Rtable-row.hidden-print').fadeIn(200);
}
$show.on("change", function() {
  if (this.checked) {
    $('.Rtable-row.hidden-print').fadeOut(200);
  } else {
    $('.Rtable-row.hidden-print').fadeIn(200);
  }
});

function allChecked() {
  return $checkboxes.length === $checkboxes.filter(":checked").length;
}

function updateButtonStatus() {
  $button.text(allChecked() ? "Uncheck all" : "Check all");
  $button.filter(function() {
    if ($(this).text() == 'Check all') {
      $show.prop('checked', false);
    } else {}
  })
}

function handleButtonClick() {
  $checkboxes.prop("checked", allChecked() ? false : true);
}

function updateStorage() {
  $checkboxes.each(function() {
    formValues[this.id] = this.checked;
    if (this.checked) {
      $(this).parents('.Rtable-row').removeClass('hidden-print');
    } else {
      $(this).parents('.Rtable-row').addClass('hidden-print');
    }
  });
  $show.each(function() {
    showHide = this.checked;
    if (this.checked) {
      console.log('checked')
    } else {
      console.log('unchecked')
    }
  });

  formValues["buttonText"] = $button.text();
  localStorage.setItem("formValues", JSON.stringify(formValues));
  localStorage.setItem("showHide", JSON.stringify(showHide));
}

$button.on("click", function() {
  handleButtonClick();
  updateButtonStatus();
  updateStorage();
});

$show.on("change", function() {
  updateStorage();
});
$checkboxes.on("change", function() {
  updateButtonStatus();
  updateStorage();
});

// On page load
$.each(formValues, function(key, value) {
  $("#" + key).prop("checked", value);
});
$show.prop('checked', showHide.value);
$button.text(formValues["buttonText"]);
...