By selecting Checkbox disappear line

Question

Save friends!

I’m trying to create a website where it has several different functions and paths for a user to enjoy. However I see that in the future may end up having much more content than I wish to show the user.

What I’m trying to create right now is this, to make sure that by selecting a Checkbox a certain line disappears for viewing, in case it is hidden. I am using the following logic

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

And to keep the Checkbox by selecting even after leaving the page, I use the following logic.

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

However the same does not disappear, I would like to find out what ah wrong in my logic.

Answer 1

Within the function Sobremim you’re using jQuery right?

If yes, then the $ before the parentheses and, as far as I know, jQuery has not the method display. An alternative is to use the methods hide and show:

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

And if you want to use pure Javascript:

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

Notice that I used list-item as display, because it is the standard of <li>.

Also, another way to persist checkbox states is to use a JSON object and convert to string before saving to localStorage and vice versa when retrieving it:

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);
    });
});