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保存与本地存储多个复选框

回答

相关问题