Question

我有多个复选框，点击后，将eventSource添加到我的jquery fullcalendar中。刷新页面时，我可以从存储中检索复选框值，但不添加事件源。我必须取消选中，然后重新检查复选框。

这是点击个人复选框执行的功能。

$("#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加载。

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

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

Answer 1

我能够得到你想要达到的目标，但它看起来像是一个黑客。见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执行功能的复选框值

2 个答案: