2016-10-03 2 views
0

브라우저를 새로 고침 할 때 삭제 버튼을 클릭 할 때까지 확인란이 계속 유지되도록 localstorage에 확인란을 저장하려고합니다.자바 스크립트 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> 

이 성공적으로 하나 개의 체크 박스를 절약하지만 여러 확인란을 저장할 것 : 여기

내가 지금까지 시도한 것입니다. 나는() 저장 기능에 루프를 추가 필요에 따라서 나는

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

내가 부하와 그 검사 값을 얻는 방법에 붙어 비트() 그러나 전화를하고 ... 내가 필요로하는 가정입니까?

건배

+0

사용 클래스 좋아해요 – Marko

답변

1

동일한 ID를 여러 개 가질 수는 없으며 고유해야합니다.

그런 다음이

같은 페이지에 여러 동일한 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 --> 
관련 문제