Javascript LocalStorageで複数のチェックボックスを保存する

localstorageにチェックボックスを保存しようとしています。ブラウザを更新すると、チェックボックスは削除ボタンをクリックするまで永続的になります。Javascript LocalStorageで複数のチェックボックスを保存する

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>

は、これが成功した1つのチェックボックスを保存しているが、私は、複数のチェックボックスを保存したいと思います：ここで

は、私がこれまで試してみましたものです。私は少しの負荷でそれらにチェック値を取得する方法にこだわっていますしかし、そこで私が...）私は（保存機能でループを追加する必要があると私は必要があると

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 LocalStorageで複数のチェックボックスを保存する

答えて

関連する問題