在页面重新加载时保存复选框状态

Question

我有这个代码，如果选中一个复选框，则显示隐藏的值。我想要的是这个代码执行以下操作，

一旦点击一个值，相反的值就会消失。并且一旦按下提交按钮，它是否可能将该值存储在数据库中？

<script>
 function toggleVisibility(id) {
   var el = document.getElementById(id);
   if (el.style.visibility=="visible") {
      el.style.visibility="visible";
   }
   else {
      el.style.visibility="visible";
   }
 }
</script>

<label for="chkemployment">Employment</label>
<input type="checkbox" id="chkemployment" onChange="toggleVisibility('imgemployment');" /><br/>
<label for="chkemployment">Extra</label>
<input type="checkbox" id="chkemployment" onChange="toggleVisibility('imgemployment');" />
<label for="chkpopulation">Population</label>
<input type="checkbox" id="chkpopulation"  onChange="toggleVisibility('imgpopulation');" />
<hr />
<span id="imgemployment" value="Hello" style="visibility:hidden"> HELLO </span>
<span id="imgpopulation" style="visibility:hidden"> Bye </span>