Save checked checkboxes and load them when the page is reloaded

Navigation
2

I would like checked checkboxes to be saved and loaded whenever the page is reloaded or reopened, in addition, icons will be displayed for the options.

I made a function in java script that loads the functions when the page is opened, using the localStorage but it is not working. Could you please help me?

new.html 

 <div class=" tab-pane active grid-container" id="biblio" align="center">

        <div id= "consulta0" class="toggle div-inline"  style="display:" > 
          <input type="checkbox" id="consultar-acervo" data-id="consultar-acervo"  name="toggle">
          <label for="consultar-acervo"></label>
          <p class= "nomeToogle"> Consultar Acervos</p>
        </div>

        <div id= "consulta1" class="toggle div-inline" style="display:" >
          <input type="checkbox" id="consultar-reserva" data-id="consultar-reserva" name="toggle"> 
          <label for="consultar-reserva"></label>
          <p class= "nomeToogle"> Consultar Reservas</p> 
        </div>

        <div id= "consulta2" class="toggle div-inline" style="display: ">
          <input type="checkbox" id="renovar-emprestimo" data-id="renovar-emprestimo" name="toggle">
          <label for="renovar-emprestimo"></label>
          <p class= "nomeToogle">Renovar Empréstimos</p> 
        </div>

        <!-- Icones de Biblioteca-->

          <div id = "zoom0" class="div-inline zoom" style="display:none">
          <a href="https://siga.ufvjm.edu.br/index.php?module=biblioteca&mode=compatibilidade&action=main:pesquisasimples" data-toggle="tooltip" data-placement="top" title="Consultar Acervo" target=“_blank”>
            <img src="../images/biblioteca/consultar-acervo.png" style="width:40%" data-id="consultar-acervo" name="icons">
          </a>
          <p class= "nomeToogle"> Consultar Acervos</p>
        </div>

        <div id = "zoom1" class="div-inline zoom" style="display:none">
          <a href="http://siga.ufvjm.edu.br/index.php?module=biblioteca&mode=compatibilidade&action=main:resusuario" data-toggle="tooltip" data-placement="top" title="Consultar Reserva" target=“_blank”>
            <img src="../images/biblioteca/consultar-reserva.png" style="width:40%" data-id="consultar-reserva" name="icons">
          </a>
          <p class= "nomeToogle"> Consultar Reservas</p>
        </div>

        <div id = "zoom2" class="div-inline zoom" style="display:none">
          <a href="http://siga.ufvjm.edu.br/index.php?module=biblioteca&mode=compatibilidade&action=main:renovusuario" data-toggle="tooltip" data-placement="top" title="Renovar Empréstimo" target=“_blank”>
            <img src="../images/biblioteca/renovar-emprestimo.png" style="width:40%" data-id="renovar-emprestimo" name="icons">
          </a>
          <p class= "nomeToogle"> Renovar Empréstimo</p>
        </div>

    </div>

functions.js 

        window.onload = function() { //executa o JavaScript imediatamente após a página ser carregada

    function checar(){

        var checa = document.getElementsByName("toggle");
        var img = document.getElementsByName("icons");


        var numElementos = checa.length;
        var i = 0;

        while (i <= numElementos){

            if(checa[i].checked == true){

                var dataCheckbox = checa[i].dataset.id;
                var dataImage = img[i].dataset.id;

                if (dataCheckbox[i] == dataImage[i]){

                   document.getElementById("zoom"+i).style.display = 'inline-block'; // mostra imagem
                   document.getElementById("consulta"+i).style.display = 'none'; // oculta checkbox marcada
                   document.getElementById("aplica").style.display = 'none'; // oculta botão aplicar
                   document.getElementById("edita").style.display = 'inline'; // mostra botão editar
                   document.getElementById("cancela").style.display = 'none'; // oculta botão cancela

                }

        //a partir daqui salva os checkbox marcados pelos usuários

        var opc = localStorage.getItem("checa[" + i + "]"); //verifica se há alguma opc no localStorage

        if (opc == null){
            break;
            }
        alert("deu");

        //grava as opc no localStorage
        localStorage.setItem("checa["+ indice +"]", checa);
        localStorage.setItem("img["+ indice +"]", img);
        indice++

            }
            else{
                document.getElementById("consulta"+i).style.display = 'none'; // oculta checkbox marcada
            }

            i++;
         }
    }

    document.getElementById('aplica').onclick = checar; 



            //função que carrega os ícones na tela de acordo com as opções salvas 
            var checa = document.getElementsByName("toggle");
            var img = document.getElementsByName("icons");
            var numElementos = checa.length;
            var b=0;

            for (i=0; i <= numElementos; i++){
                var opc = localStorage.getItem("checa[" + i +"]"); //verifica se há opc
                if(opc == null){
                    break;
                }

                var dataCheckbox = checa[i].dataset.id;
                var dataImage = img[i].dataset.id;

                if (dataCheckbox[i] == dataImage[i]){

                    document.getElementById("zoom"+i).style.display = 'none'; // oculta imagem
                    document.getElementById("consulta"+i).style.display = 'inline-block'; // mostra checkbox marcada
                    document.getElementById("aplica").style.display = 'block'; // mostra botão aplicar
                    document.getElementById("edita").style.display = 'none'; // oculta botão editar
                    document.getElementById("cancela").style.display = 'inline-block'; // mostra botão cancela

                }

                else{
                    document.getElementById("consulta"+i).style.display = 'inline-block'; // mostra checkbox marcada
                }


            }

};
    
asked by anonymous 25.06.2018 / 03:38

1 answer

1

You can save the checked items in the LocationStorage in this way: 

var ls = localStorage.getItem("box");
if(ls){
   var b = ls.split(",");
   for(var x=0; x<b.length; x++){
      document.getElementById(b[x]).checked = true;
      document.getElementById(b[x]).parentNode.style.display = "none";
      document.querySelector("[data-id='"+b[x]+"']").parentNode.parentNode.style.display = "block";
   }
   var checados = b;
}else{
   var checados = [];
}

var boxes = document.querySelectorAll("#biblio div [type='checkbox']");
for(var x=0; x<boxes.length; x++){
   boxes[x].onchange = function(){
      var idx = checados.indexOf(this.id);
      if(this.checked && !~idx){
         checados.push(this.id);
         document.getElementById(this.id).parentNode.style.display = "none";
         document.querySelector("[data-id='"+this.id+"']").parentNode.parentNode.style.display = "block";
      }else{
         checados.splice(idx, 1);
      }
      localStorage.setItem("box", checados);
   }
}

When reloading the page, checkboxes will continue to be marked.

Remove the% of checkboxes that are not unnecessary since data-id has the same value.

    
25.06.2018 / 06:10
Fourier transform problem How to transform a byte array into an image in WPF?