기능을 수행하는 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); 
     }); 
    } 
}); 

편집 : 요청에 따라

내가 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'); 
    } 
    } 

});