localstorage複選框

Question

我試圖添加localstorage到兩個ckeckboxes，但第一個複選框的行爲完全像secod，即使它們具有不同的狀態。如果第一個複選框未被選中，第二個被選中，則在頁面重新加載時，第一個被選中，就像第二個被選中一樣，當第二個被選中時，第一個也被選中，即使被選中。我不知道爲什麼它的行爲就像一個複製貓 這裏是一個GitHub的鏈接項目：https://github.com/OGUNSOLA/project-9-master-

感謝

<div class="notify"> 
       <p>Send Email Notifications</p> 
       <div class="onoffswitch toggleSwitch1" > 
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" > 
        <label class="onoffswitch-label" for="myonoffswitch"> 
         <span class="onoffswitch-inner"></span> 
         <span class="onoffswitch-switch"></span> 
        </label> 
       </div> 
      </div> 

      <div class="profile"> 
       <p>Set Profile To Public</p> 
       <div class="onoffswitch toggleSwitch2" > 
        <input type="checkbox" name="onoffswitch2" class="onoffswitch-checkbox" id="myonoffswitch2" > 
        <label class="onoffswitch-label" for="myonoffswitch2"> 
         <span class="onoffswitch-inner"></span> 
         <span class="onoffswitch-switch"></span> 
        </label> 
       </div> 
      </div> 


var save = document.getElementById("save"); 
save.addEventListener("click",saved,false); 

window.onload=load; 



var i; 
var checkboxes = document.querySelectorAll('input[type=checkbox]'); 


function saved() { 

    for(i = 0; i< checkboxes.length;i++){ 
    localStorage.setItem(checkboxes[i].value, checkboxes[i].checked); 
    } 
} 

function load(){ 
    for(i = 0; i< checkboxes.length;i++){ 
    checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === "true"? true:false; 
    } 
} 

Answer 1

你保存到localstorage的value的基礎上，但你有沒有value屬性在您的複選框。這給一試：

HTML

<div class="notify"> 
    <p>Send Email Notifications</p> 
    <div class="onoffswitch toggleSwitch1"> 
     <input type="checkbox" name="onoffswitch" value="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch"> 
     <label class="onoffswitch-label" for="myonoffswitch"> 
      <span class="onoffswitch-inner"></span> 
      <span class="onoffswitch-switch"></span> 
     </label> 
    </div> 
</div> 
<div class="profile"> 
    <p>Set Profile To Public</p> 
    <div class="onoffswitch toggleSwitch2"> 
     <input type="checkbox" name="onoffswitch2" value="onoffswitch2" class="onoffswitch-checkbox" id="myonoffswitch2"> 
     <label class="onoffswitch-label" for="myonoffswitch2"> 
      <span class="onoffswitch-inner"></span> 
      <span class="onoffswitch-switch"></span> 
     </label> 
    </div> 
</div> 

的JavaScript

var save = document.getElementById("save"); 
save.addEventListener("click", saved, false); 
window.onload = load; 
var i; 
var checkboxes = document.querySelectorAll('input[type=checkbox]'); 

function saved() { 
    for (i = 0; i < checkboxes.length; i++) { 
     localStorage.setItem(checkboxes[i].value, checkboxes[i].checked); 
    } 
} 

function load() { 
    for (i = 0; i < checkboxes.length; i++) { 
     checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === "true" ? true : false; 
    } 
}