Über meine JavaScript-Code-Funktion

Question

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

Dieser Code wird angenommen, die checkboxs speichern ich nach dem Klicken auf die Schaltfläche Speichern aktiviert haben. Derzeit funktioniert das aber nur für einen Button. Ich versuche, es an alle von ihnen zu arbeiten, um mir zu erlauben, sie alle zu überprüfen und zu speichern, und ich plane, mehr als 9 Knöpfe hinzuzufügen.

Der Versuch, IDs durch eine Funktion zu übergeben. Nicht sicher, wie es geht.

Wenn ich auf Speichern mit mehr als einer der Kästchen klicken, hält es nur die erste überprüft Ursache, die die ID box1 hat, was das Javascript in der Funktion aufruft. Welchen Code benötige ich und wie gehe ich bei der Verwendung dieser Funktion für jeden BTN vor? Ich dachte an einen Onclick mit .dies könnte funktionieren, aber ich bin mir nicht sicher.

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

hier ist ich etwas Hoffnung versucht, es hilft ... [Anmerkung: i. Haben Sie den Code nur verwendet, um es einfach zu machen, wenn Sie noch etwas haben Sie einen Kommentar fragen] hier wird Geige http://jsfiddle.net/Lwxoeyyp/411/ HTML aktualisiert:

<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: