Javascript保存與本地存儲多個複選框

我想保存與localstorage複選框，以便當我刷新瀏覽器時，選中的框保持不變，直到我點擊刪除按鈕。Javascript保存與本地存儲多個複選框

這裏是我到目前爲止已經試過：

function save(){ 
var checkbox = document.getElementById('ch1'); 
localStorage.setItem('ch1', checkbox.checked); 
} 

function load(){  
var checked = JSON.parse(localStorage.getItem('ch1')); 
document.getElementById("ch1").checked = checked; 
} 

function reload(){ 
location.reload(); 
localStorage.clear() 
} 

load(); 

<body onload="load()"> 
<input type="button" id="ReserveerButton1" value="save" onclick="save()"/> 
<input type="button" id="Wisbutton1" value="delete" onclick="reload()"/> 
<input type="checkbox" id="ch1"></input> 

//additional checkboxes 
<input type="checkbox" id="ch1"></input> 
<input type="checkbox" id="ch1"></input> 
<input type="checkbox" id="ch1"></input> 

</body>

這是成功節省一個複選框，但我想保存多個複選框。所以我假設我需要，我需要在功能上添加一個循環保存（）...

function save(){ 
var checkbox = document.getElementById('ch1'); 
    for (i = 0; i < checkbox.length; i ++) { 
    localStorage.setItem('ch1', checkbox.checked); 
    } 
}

不過我有點停留在如何與負載獲得這些檢查的值（）調用？

乾杯

來源

2016-10-03 Hexana

你不能在同一個頁面上使用多個相同的ID，使用類 – Marko

你不能有多個相同的ID，它們必須是唯一的。

然後，做這樣的

function save(){ 
    // Get all checkbox inputs 
    var inputs = document.querySelectorAll('input[type="checkbox"]'); 
    var arrData = []; 
    // For each inputs... 
    inputs.forEach(function(input){ 
    // ... save what you want (but 'ID' and 'checked' values are necessary) 
    arrData.push({ id: input.id, checked: input.checked }); 
    }); 
    // Save in localStorage 
    localStorage.setItem('inputs', JSON.stringify(arrData)); 

    console.log(JSON.stringify(arrData)); 
    // [ 
    // { 
    //  'id': 'ch1', 
    //  'checked': false // or true 
    // }, 
    // ... and so on 
    // ] 
} 

function load(){ 
    var inputs = JSON.parse(localStorage.getItem('inputs')); 
    // For each inputs... 
    inputs.forEach(function(input){ 
    // Set the 'checked' value 
    document.getElementById(input.id).checked = input.checked; 
    }); 
} 


<input type="checkbox" id="ch1"></input> 
<input type="checkbox" id="ch2"></input> 
<!-- And so on -->

來源

2016-10-03 11:45:17 Robiseb

Javascript保存與本地存儲多個複選框

回答

相關問題