Question

我已经设置了localstorage以保存复选框的值，并具有“全部选中”和“全部取消选中”功能。我试图实现一种方法，当选中与“全部选中”复选框分开的特定复选框时，仅显示选中的项目。我遇到的问题是将该复选框的值保存到localstorage中。我在控制台中看到，我的formValues复选框以及单独的showHide复选框都保存在localstorage中。我只是迷住了显示和隐藏功能，并检查了所有功能。

附录：问题是

$show复选框的状态似乎已正确保存在本地存储中（在控制台中），但在重新加载页面时淡出和FadeIn功能未显示。
如果我取消选中一个复选框，然后选中“ Show Checked”，则未选中的div应当被隐藏，但是当我单击“ Check All”按钮时（将“ Show Checked”设置为false）隐藏（未选中）的div不会更改为选中然后显示。

似乎我的问题不只是保存复选框状态，因为这似乎可以在本地存储中使用，而是在选中复选框并重新加载页面时添加和删除“ hidden-print”类。控制台显示该类未添加到“保存已选中”复选框。

我意识到这可能会造成混淆，并且我可能会尝试在全部检查和隐藏div上做很多事情。任何帮助或指导表示赞赏！

这里是codepen

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"]);

与本地存储一起保存的多个复选框值和一个“所有复选框”值

0 个答案: