0
I have this simple Checklist that I created, using checkbox, javascript and Localstorage
It’s working, but how to make it more practical and more lean?
function check1() {
var check1status = document.getElementById("check1").checked;
document.getElementById("check1").checked = check1status ;
localStorage.setItem('check1', check1status);
}
function check2() {
var check2status = document.getElementById("check2").checked;
document.getElementById("check2").checked = check2status ;
localStorage.setItem('check2', check2status);
}
function check3() {
var check3status = document.getElementById("check3").checked;
document.getElementById("check3").checked = check3status ;
localStorage.setItem('check3', check3status);
}
function check4() {
var check4status = document.getElementById("check4").checked;
document.getElementById("check4").checked = check4status ;
localStorage.setItem('check4', check4status);
}
function check5() {
var check5status = document.getElementById("check5").checked;
document.getElementById("check5").checked = check5status ;
localStorage.setItem('check5', check5status);
}
function check6() {
var check6status = document.getElementById("check6").checked;
document.getElementById("check6").checked = check6status ;
localStorage.setItem('check6', check6status);
}
function check7() {
var check7status = document.getElementById("check7").checked;
document.getElementById("check7").checked = check7status ;
localStorage.setItem('check7', check7status);
}
function check8() {
var check8status = document.getElementById("check8").checked;
document.getElementById("check8").checked = check8status ;
localStorage.setItem('check8', check8status);
}
// set chekcboxes using localstorage onload page
var check1statusStorage = localStorage.getItem("check1");
var check2statusStorage = localStorage.getItem("check2");
var check3statusStorage = localStorage.getItem("check3");
var check4statusStorage = localStorage.getItem("check4");
var check5statusStorage = localStorage.getItem("check5");
var check6statusStorage = localStorage.getItem("check6");
var check7statusStorage = localStorage.getItem("check7");
var check8statusStorage = localStorage.getItem("check8");
function checkBoxStatusStorage(){
if (check1statusStorage == 'true'){
document.getElementById("check1").checked = true ;
}else{
document.getElementById("check1").checked = false ;
}
if (check2statusStorage == 'true'){
document.getElementById("check2").checked = true ;
}else{
document.getElementById("check2").checked = false ;
}
if (check3statusStorage == 'true'){
document.getElementById("check3").checked = true ;
}else{
document.getElementById("check3").checked = false ;
}
if (check4statusStorage == 'true'){
document.getElementById("check4").checked = true ;
}else{
document.getElementById("check4").checked = false ;
}
if (check5statusStorage == 'true'){
document.getElementById("check5").checked = true ;
}else{
document.getElementById("check5").checked = false ;
}
if (check6statusStorage == 'true'){
document.getElementById("check6").checked = true ;
}else{
document.getElementById("check6").checked = false ;
}
if (check7statusStorage == 'true'){
document.getElementById("check7").checked = true ;
}else{
document.getElementById("check7").checked = false ;
}
if (check8statusStorage == 'true'){
document.getElementById("check8").checked = true ;
}else{
document.getElementById("check8").checked = false ;
}
}
<div class="center">
<p unselectable="on" class="naoSelecionavel"> <b>Resumo dos Procedimentos </b> <p>
<label><input id="check1" type="checkbox" onclick="check1()"> 1 - Envio de Lista de alunos</label><br>
<label><input id="check2" type="checkbox" onclick="check2()"> 2 - Instalação de APP OMR</label> <br>
<label><input id="check3" type="checkbox" onclick="check3()"> 3 - Download de Modelo Exame OMR </label> <br>
<label><input id="check4" type="checkbox" onclick="check4()"> 4 - Impressão da Prova e Gabaritos (Recebidos por Email)</label> <br>
<label><input id="check5" type="checkbox" onclick="check5()"> 5 - Aplicação</label> <br>
<label><input id="check6" type="checkbox" onclick="check6()"> 6 - Leitura dos Gabaritos</label> <br>
<label><input id="check7" type="checkbox" onclick="check7()"> 7 - Envio do Relatório pelo APP OMR</label> <br>
<label><input id="check8" type="checkbox" onclick="check8()"> 8 - Recebimento de Ralatório de Notas por Aluno</label> <br>
</p>
</div>
You have 8 identical functions, that the only difference is a value used and that have no parameters. Think about it...
– Woss