如何基於存儲在數組中的復選框值輸出響應？

Question

我有代表各個星期幾的固定復選框。 我能夠將這些值存儲在數組中的localStorage中，以便在刷新后保持不變。

我想知道如何根據選擇的日期輸出“工作日”或“周末”？ 例如，用戶選擇“星期一”和“星期三”，而輸出則是“星期幾”

我已經使用案例進行了測試，但是無法將其與localStorage的值一起使用。 我如何將值存儲在數組中有什么問題嗎？

這是我的codepen 。

我用於存儲和保持值檢查的功能：

function updateStorage() {
    $checkboxes.each(function() {
        formValues[this.id] = this.checked;
    });

    localStorage.setItem("formValues", JSON.stringify(formValues));
}

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

// On page load
$.each(formValues, function(key, value) {
    $("#" + key).prop('checked', value);
});

Answer 1

這是問題。 寫入本地存儲后，您需要刪除該項目才能重新寫入

//checkbox

//function for persistent checkbox     
var formValues = JSON.parse(localStorage.getItem('formValues')) || {};
var $checkboxes = $("#checkbox-wrapper :checkbox");

function updateStorage(){
  $checkboxes.each(function() {
    formValues[this.id] = this.checked;
  });
  localStorage.removeItem('formValues');
  localStorage.setItem("formValues", JSON.stringify(formValues));
}

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

// On page load

$.each(formValues, function(key, value) {
  $("#output").html($("#output").html() + key + ": " + value + "<br/>")
});

我使用上述代碼更新了Codepen中的代碼，並且可以正常工作。

Answer 2

這是一個將檢查您的days對象並返回具有2個布爾屬性（ isWeekDay和isWeekendDay ）的對象的isWeekendDay ：

function checkweekday(days) {
  console.log('days', days);
  var weekDays = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'];
  var weekendDays = ['saturday', 'sunday'];
  var isWeekDay = false;
  var isWeekendDay = false;
  for (var day in days) {
    if (days[day]) {
      if (day) {
        if (weekDays.indexOf(day) > -1) {
          isWeekDay = true;
        }
        if (weekendDays.indexOf(day) > -1) {
          isWeekendDay = true;
        }
      }
    }
  }
  return {
    isWeekDay: isWeekDay,
    isWeekendDay: isWeekendDay
  }
}

從localStorage檢索值后，使用對象調用函數。

var formValues = JSON.parse(localStorage.getItem('formValues')) || {};
var check = checkweekday(formValues);
console.log(check);

這是更新的plunkr 。

Answer 3

我希望你的意思是這樣的

//checkbox

//function for persistent checkbox     
var formValues = JSON.parse(localStorage.getItem('formValues')) || {};
var $checkboxes = $("#checkbox-wrapper :checkbox");

function outputResult(isWeekday,isWeekend){

  var output = ""
  if( isWeekday && isWeekend ) output = "Both";
  else if( isWeekday ) output = "Weekday";
  else if( isWeekend ) output = "Weekend";
  document.getElementById("output").innerHTML = output;

}

function checkDay(){

    var isWeekday = false;
    var isWeekend = false;

    $checkboxes.each(function(){
      if( this.checked ){
        if( this.id == "saturday" || this.id == "sunday" ) isWeekend  = true;
        else isWeekday = true;
      }
    });

  outputResult(isWeekday,isWeekend);
}

function updateStorage(){

  $checkboxes.each(function(){
    formValues[this.id] = this.checked;
  });

  localStorage.setItem("formValues", JSON.stringify(formValues));

  checkDay();
}

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

// On page load
$.each(formValues, function(key, value) {
  $("#" + key).prop('checked', value);
});

https://codepen.io/anon/pen/gepomY?editors=1011