Checklist using checkbox, javascript and Localstorage

Asked

Viewed 239 times

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>

  • 2

    You have 8 identical functions, that the only difference is a value used and that have no parameters. Think about it...

2 answers

2


function checkItem(item) {
  var check1status = document.getElementById(item).checked;
  document.getElementById(item).checked = check1status ;
  localStorage.setItem(item, check1status);
}
<div class="center">
          <p unselectable="on" class="naoSelecionavel"> <b>Resumo dos Procedimentos </b> <p>

            <label><input id="check1" type="checkbox" onclick="checkItem('check1')"> 1 - Envio de Lista de alunos</label><br>  
            <label><input id="check2" type="checkbox" onclick="checkItem('check2')"> 2 - Instalação de APP OMR</label>  <br>  
            <label><input id="check3" type="checkbox" onclick="checkItem('check3')"> 3 - Download de Modelo Exame OMR </label> <br>  
            <label><input id="check4" type="checkbox" onclick="checkItem('check4')"> 4 - Impressão da Prova e Gabaritos (Recebidos por Email)</label> <br>  
            <label><input id="check5" type="checkbox" onclick="checkItem('check5')"> 5 - Aplicação</label> <br>  
            <label><input id="check6" type="checkbox" onclick="checkItem('check6')"> 6 - Leitura dos Gabaritos</label> <br>  
            <label><input id="check7" type="checkbox" onclick="checkItem('check7')"> 7 - Envio do Relatório pelo APP OMR</label> <br>  
            <label><input id="check8" type="checkbox" onclick="checkItem('check8')"> 8 - Recebimento de Ralatório de Notas por Aluno</label> <br>  
          </p>
        </div>

  • testing here now

  • 1

    It was just an example based on @Andersoncarloswoss' comment, you’ll probably have to adjust something.

  • Solved! Thank you @Leonardo

  • I put an answer below, would that be the best way?

0

function checkItem(item) {
  var check1status = document.getElementById(item).checked;
  localStorage.setItem(item, check1status); 
}

// A $( document ).ready() block.
$( document ).ready(function() {
  checkItemOnload('check1');
  checkItemOnload('check2');
  checkItemOnload('check3');
  checkItemOnload('check4');
  checkItemOnload('check5');
  checkItemOnload('check6');
  checkItemOnload('check7');
  checkItemOnload('check8');
  });

function checkItemOnload(item) {
var checkStatusStorage = localStorage.getItem(item);
  if (checkStatusStorage == 'true'){
            document.getElementById(item).checked = true ;
            }else{
            document.getElementById(item).checked = false ;
  }
}
<div class="center">
          <p unselectable="on" class="naoSelecionavel"> <b>Resumo dos Procedimentos </b> <p>

              <label><input id="check1" type="checkbox" onclick="checkItem('check1')"> 1 - Envio de Lista de alunos</label><br>  
              <label><input id="check2" type="checkbox" onclick="checkItem('check2')"> 2 - Instalação de APP OMR</label>  <br>  
              <label><input id="check3" type="checkbox" onclick="checkItem('check3')"> 3 - Download de Modelo Exame OMR </label> <br>  
              <label><input id="check4" type="checkbox" onclick="checkItem('check4')"> 4 - Impressão da Prova e Gabaritos (Recebidos por Email)</label> <br>  
              <label><input id="check5" type="checkbox" onclick="checkItem('check5')"> 5 - Aplicação</label> <br>  
              <label><input id="check6" type="checkbox" onclick="checkItem('check6')"> 6 - Leitura dos Gabaritos</label> <br>  
              <label><input id="check7" type="checkbox" onclick="checkItem('check7')"> 7 - Envio do Relatório pelo APP OMR</label> <br>  
              <label><input id="check8" type="checkbox" onclick="checkItem('check8')"> 8 - Recebimento de Ralatório de Notas por Aluno</label> <br>  
</p>
</div>

  • 1

    Pasta, that’s a good one. Now I’ve seen something that seems to be redundant, which is the second line of the checkItem() function, probably doesn’t need the second line. Take a test to remove it to perfect the code.

  • @Leonardogetulio really, she’s a remnant of the Code Force, thanks again, hey blocked me because of this question, is there any way to unlock me? I was just hoping to learn a little more.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.