0

Salve amigos!

Estou tentando criar um site web onde tenha várias funções e caminhos diferentes para um usuário usufruir. Porem vejo que no futuro pode acabar tendo muito mais conteúdo do que desejo mostrar ao usuário.

O que estou tentando criar agora é o seguinte, fazer com que ao selecionar um Checkbox uma determinada linha desapareça para visualização, no caso que ela fique oculta. estou usando a seguinte logica

 <li id="sobremim2"><a href="../Cadastros/minha_informacao.php">Sobre mim</a></li>
      <li><a href="#">Relatorios</a></li>
      <li><a href="#">Locação</a></li>
      <li><a href="#">Estoque</a></li>


<input type="checkbox" id="sobremim" > Sobre mim
 <input type="button" onclick="Sobremim()" value="Enviar">

 
 <script>
function Sobremim(){
	if(document.getElementById('sobremim').checked){
		("#sobremim2").display('none');
	} else {
		("#sobremim2").display('block');
	}
}
 </script>

E para manter o Checkbox selecionando mesmo apos sair da pagina, uso a seguinte logica.

<script>
document.addEventListener("DOMContentLoaded", function(){

   var checkbox = document.querySelectorAll("input[type='checkbox']");

   for(var item of checkbox){
      item.addEventListener("click", function(){
         localStorage.s_item ? 
            localStorage.s_item = localStorage.s_item.indexOf(this.id+",") == -1 
            ? localStorage.s_item+this.id+"," 
            : localStorage.s_item.replace(this.id+",","") : 
         localStorage.s_item = this.id+",";  
      });
   }

   if(localStorage.s_item){ 
      for(var item of checkbox){ 
         item.checked = localStorage.s_item.indexOf(item.id+",") != -1 ? true : false; 
      }
   }
});
</script>

Porem a mesma não desaparece, gostaria de descobrir o que ah de errado na minha logica.

1 Resposta 1

0

Dentro da função Sobremim você tá usando jQuery certo?

Se sim, então está faltando o $ antes do parênteses e, pelo que eu saiba, o jQuery não tem o método display. Uma alternativa é usar os métodos hide e show:

function Sobremim(){
    if(document.getElementById('sobremim').checked){
        $("#sobremim2").hide();
    } else {
        $("#sobremim2").show();
    }
}

E se quiser utilizar JavaScript puro:

function Sobremim(){
    if(document.getElementById('sobremim').checked){
        document.getElementById('sobremim2').style.display = 'none';
    } else {
        document.getElementById('sobremim2').style.display = 'list-item';
    }
}

Repare que utilizei list-item como display, porque é o padrão do <li>.

Além disso, um outro jeito de persistir os estados dos checkboxes é usar um objeto JSON e converter para string antes de salvar no localStorage e vice-versa na hora de recuperá-lo:

document.addEventListener("DOMContentLoaded", function(){
    // Recupera estado dos checkbox do localStorage ou, se não tiver, cria objeto vazio
    var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {};

    var checkbox = $("input[type='checkbox']");

    checkbox.on("change", function(e) {
        // Altera estado do checkbox na lista
        checkboxValues[e.target.id] = e.target.checked;
        // Atualiza estado dos checkboxes no localStorage
        localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
    });

    $.each(checkboxValues, function(key, value) {
      $("#" + key).prop('checked', value);
    });
});
3
  • Deu certo, muito obrigado. Tenho outra dúvida que não cheguei a pesquisar a fundo por conta do tempo. Tem alguma maneira de um usuário marcar um Checkbox e mesmo após fechar o navegador e abrir novamente ele permaneça Selecionado e caso eu deselecionar o mesmo ele fique deselecionado ? Commented 4/03/2019 às 22:36
  • Editei a resposta, dá uma olhada se é isso mesmo.
    – nhtoshiaki
    Commented 5/03/2019 às 0:23
  • Obrigado mano, ajudou muito Commented 5/03/2019 às 1:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .