機能を実行するwebstorageのチェックボックスの値

Question

私は、クリックすると、jquery fullcalendarにeventSourceを追加する複数のチェックボックスがあります。ページを更新すると、ストレージからチェックボックスの値を取得できますが、イベントソースは追加されません。チェックボックスをオフにして、チェックボックスを再チェックする必要があります。

ここでは、個別のチェックボックスをクリックする機能があります。ここ

$("#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); 
     }); 
    } 
}); 

EDIT：要求されたとして

私はJSFiddle demoを追加しました。 チェックボックスの値は保存されていますが、私のイベントはEventsListRed.phpから読み込まれません。

jsfiddleで.phpファイルをリンクする方法がわかりません。

私の問題はチェックボックスにチェックマークを付けることですが、変更機能をトリガーしていないと思います。

Answer 1

このチェックボックスがオンになっていることを確認する前に.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'); 

    } 

    } 

Answer 2

達成したいことを得ることができましたが、ハックのようです。 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'); 
    } 
    } 

});