来自 webstorage 执行功能的复选框值

Question

我有多个复选框，单击这些复选框后，会将事件源添加到我的 jquery 全日历中。当我刷新页面时，我可以从存储中检索复选框值，但不会添加事件源。我必须取消选中然后重新选中复选框。

这是单击单个复选框所执行的功能。

$("#checkbox1").change(function() {
    if (this.checked) {
        $('#calendar').fullCalendar('addEventSource', 'EventListRed.php');
    } else {
        $('#calendar').fullCalendar('removeEventSource', 'EventListRed.php');
    }
});

下面是我如何使用网络存储来保存复选框值

$(document).ready(function() {
    var boxes = document.querySelectorAll("input[type='checkbox']");
    for (var i = 0; i < boxes.length; i++) {
        var box = boxes[i];
        if (box.hasAttribute("store")) {
            setupBox(box);
        }
    }

    function setupBox(box) {
        var storageId = box.getAttribute("store");
        var oldVal = localStorage.getItem(storageId);
        box.checked = oldVal === "true" ? true : false;
        box.addEventListener("change", function() {
            localStorage.setItem(storageId, this.checked);
        });
    }
});

编辑：

我已按要求添加了JSFiddle demo。如您所见，复选框值已保存，但我的事件未从 EventsListRed.php.

加载

请注意，我不确定如何 link jsfiddle 中的 .php 文件。

我认为我的问题是我将复选框标记为选中但它没有触发更改功能。

Answer 1

我能够实现你想要实现的目标，但这似乎是一个 hack。参见 JsFiddle Demo

HTML

<input type="checkbox" id="cbRed" store="checkbox3" class="chk" />
<label for="cbRed">Red</label>
<div id='calendar'></div>

CSS

body {
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}

#calendar {
  width: 600px;
  margin: 0 auto;
}

JS

$(document).ready(function() {

  var calendar = $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },


  });

  //Checkbox removing/adding red events
  $("#cbRed").change(function() {
    if (this.checked) {
      $('#calendar').fullCalendar('addEventSource', 'EventListRed.php');
    } else {
      $('#calendar').fullCalendar('removeEventSource', 'EventListRed.php');
    }

  });

});

$(document).ready(function() {
  var boxes = document.querySelectorAll("input[type='checkbox']");

  for (var i = 0; i < boxes.length; i++) {
    var box = boxes[i];
    if (box.hasAttribute("store")) {
      setupBox(box);
    }
  }

  function setupBox(box) {
    var storageId = box.getAttribute("store");
    var oldVal = localStorage.getItem(storageId);
    $(box).on("change", function() {
      localStorage.setItem(storageId, this.checked);
    });
    box.checked = oldVal === "true" ? true : false;
    if (box.checked) {
      $(box).trigger('change');
    }
  }

});

Answer 2

您需要先调用 .fullCalendar( 'refetchEvents' )，然后才能选中该复选框。

refetchEvents

请查看官方文档

  function setupBox(box) {
    var storageId = box.getAttribute("store");
    var oldVal = localStorage.getItem(storageId);
    $(box).on("change", function() {
      localStorage.setItem(storageId, this.checked);
    });
    box.checked = oldVal === "true" ? true : false;
    $('#calendar').fullCalendar( 'refetchEvents' ); 
    if (box.checked) {   
      $(box).trigger('change');

    }

  }

来自 webstorage 执行功能的复选框值

checkbox value from webstorage performing function

javascript

jquery

fullcalendar

web-storage