關於我的JavaScript代碼功能

Question

http://jsfiddle.net/MrBigglesWorth/Lwxoeyyp/408/

此代碼是想救我點擊Save按鈕後打勾checkboxs。目前，這是工作，但只有一個按鈕。我試圖讓它在所有這些工具上運行，以允許我檢查它們並保存，並計劃添加超過9個按鈕。

試圖通過函數傳遞ID。不知道該怎麼做。

當我點擊它保存檢查boxs的不止一個，只保留具有ID BOX1第一個選中的原因是什麼JavaScript在函數調用。我需要什麼代碼，以及如何爲每個btn使用此功能。我正在考慮與這個onclick。這可能工作，但我不知道。

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

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

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

 
} 
 

 
load();

<h1>Project Name</h1> 
 
<h2>Link To Site</h2> 
 
<div class="navbar"> 
 
    <center> 
 
    <input type="button" id="saveBtn" value="Save" onclick="save()" /> 
 
    <input type="button" id="resetBtn" value="Reset" onclick="wis()" /> 
 
    </center> 
 
</div> 
 

 
<form action="#"> 
 
    <p> 
 
    <input type="checkbox" id="btn1" /> 
 
    <label for="btn1">Wordpress Installed</label> 
 
    </p> 
 
    <p> 
 
    <input type="checkbox" id="btn2" /> 
 
    <label for="btn2">Wordpress Installed</label> 
 
    </p> 
 
    <p> 
 
    <input type="checkbox" id="btn3" /> 
 
    <label for="btn3">Wordpress Installed</label> 
 
    </p> 
 
    <p> 
 
    <input type="checkbox" id="btn4" /> 
 
    <label for="btn4">Wordpress Installed</label> 
 
    </p> 
 
    <p> 
 
    <input type="checkbox" id="btn5" /> 
 
    <label for="btn5">Wordpress Installed</label> 
 
    </p> 
 
    <p> 
 
    <input type="checkbox" id="btn6" /> 
 
    <label for="btn6">Wordpress Installed</label> 
 
    </p> 
 
    <p> 
 
    <input type="checkbox" id="btn7" /> 
 
    <label for="btn7">Wordpress Installed</label> 
 
    </p> 
 
    <p> 
 
    <input type="checkbox" id="btn8" /> 
 
    <label for="btn8">Wordpress Installed</label> 
 
    </p> 
 

 

 
</form>

Answer 1

這裏的東西我想希望它可以幫助... [注：我用你的代碼只是爲了讓它簡單，如果你還有什麼問題要問請評論] 這裏被更新小提琴http://jsfiddle.net/Lwxoeyyp/411/ HTML：

<h1>Project Name</h1> 
<h2>Link To Site</h2> 
<div class="navbar"> 
    <center> 
    <input type="button" id="saveBtn" value="Save" onclick="save()"/> 
    <input type="button" id="loadBtn" value="Load values" onclick="load()"/> 
    <input type="button" id="resetBtn" value="Reset" onclick="resetValues()"/> 
    <input type="button" id="resetBtn1" value="Reset Local" onclick="resetLocal()"/> 
    </center> 
</div> 

<form action="#"> 
    <p> 
    <input type="checkbox" id="btn1" class="test" /> 
    <label for="btn1">Wordpress Installed</label> 
    </p> 
    <p> 
    <input type="checkbox" id="btn2" class="test" /> 
    <label for="btn2">Wordpress Installed</label> 
    </p> 
    <p> 
    <input type="checkbox" id="btn3" class="test" /> 
    <label for="btn3">Wordpress Installed</label> 
    </p> 
    <p> 
    <input type="checkbox" id="btn4" class="test" /> 
    <label for="btn4">Wordpress Installed</label> 
    </p> 
    <p> 
    <input type="checkbox" id="btn5" class="test" /> 
    <label for="btn5">Wordpress Installed</label> 
    </p> 
</form> 

的Javascript：

// save data to localstorage 
function save(){ 
    // get all the checkboxes at a time. 
    var checkbox = document.getElementsByClassName('test'); 
    // iterate to collection of checkboxes object and save its id value in localstorage. 
    for(var i =0 ;i<checkbox.length;i++){ 
     var id = checkbox[i].id; 
     localStorage.setItem(id, checkbox[i].checked); 
    }  
} 

// load the data from localstorage. 
function load(){  
    // iterate to collection of checkboxes object and getits id value 
    var checkbox = document.getElementsByClassName('test'); 
    for(var i =0 ;i<checkbox.length;i++){ 
    var id = checkbox[i].id; 
    // see here used string comparison as value returned from localstorage is string. 
     if(localStorage.getItem(id) === 'true'){ 
     checkbox[i].checked = true; 
     } 
    else 
    { 
     checkbox[i].checked = false; 
    } 
    } 
} 



// reset values of all checkboxes 
    function resetValues(){ 
     var checkbox = document.getElementsByClassName('test'); 
     for(var i =0 ;i<checkbox.length;i++){ 
     var item = document.getElementById(checkbox[i].id); 
      if(item.checked == true){ 
      item.checked = false; 
      } 
     }  
    } 
    // remove data from localstorage. 
    function resetLocal(){ 
     localStorage.clear(); 
     alert('localstorage cleared'); 
    }