Adapt JQUERY to HIDE and Show

Question

I would like to adapt my JQUERY function so that when unchecking the checkbox "Is crossover" the text field disappears txt_endereco_ocorrencia_02 and out came the field txt_endereco_ocorrencia_numero, just make the field txt_endereco_ocorrencia_02 appear when clicking the checkbox and the field does not disappear txt_endereco_ocorrencia_numero, already load disabled field txt_endereco_ocorrencia_02 when opening the form, see below, I believe I will have to change some points:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery/js/jquery-1.9.1.js" type="text/javascript"></script>
<script>
  $(document).ready(function() {
    $("#esconder_ocorrencia_02").hide();
  });

  function getval(sel) {
    var selecao = sel.value;
    if (selecao == "Desligado") {
      alert("funcionou");
      document.getElementById("#esconder_ocorrencia_02").innerHTML = $("#esconder_ocorrencia_02").show();
    } else {
      $("#esconder_ocorrencia_02").hide();
    }
  }
</script>

<tr>
  <td><strong>Endere&ccedil;o Ocorr&ecirc;ncia</strong></td>
  <td><input type="text" name="txt_endereco_ocorrencia_01" size="70" />&nbsp;
    <strong>N&uacute;mero</strong>&nbsp;
    <input type="text" name="txt_endereco_ocorrencia_numero" size="8">&nbsp;
    <input type="checkbox" name="chk_cruzamento" id="cruzamento" value="Desligado" onclick="getval(this);">&Eacute; cruzamento?<br /><br />
    <div id="esconder_ocorrencia_02">
      <input type="text" name="txt_endereco_ocorrencia_02" size="70"></div>
  </td>
</tr>

Answer 1

You can use the .toggle() of jQuery, passing the this.checked for him to know whether to show or not. Here the code is only:

function getval(sel) {
    $("#esconder_ocorrencia_02").toggle(sel.checked);
}

Example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery/js/jquery-1.9.1.js" type="text/javascript"></script>
<script>
  $(document).ready(function() {
    $("#esconder_ocorrencia_02").hide();
  });

  function getval(sel) {
    $("#esconder_ocorrencia_02").toggle(sel.checked);
  }
</script>

<tr>
  <td><strong>Endere&ccedil;o Ocorr&ecirc;ncia</strong></td>
  <td><input type="text" name="txt_endereco_ocorrencia_01" size="70" />&nbsp;
    <strong>N&uacute;mero</strong>&nbsp;
    <input type="text" name="txt_endereco_ocorrencia_numero" size="8">&nbsp;
    <input type="checkbox" name="chk_cruzamento" id="cruzamento" value="Desligado" onclick="getval(this);">&Eacute; cruzamento?<br /><br />
    <div id="esconder_ocorrencia_02">
      <input type="text" name="txt_endereco_ocorrencia_02" size="70"></div>
  </td>
</tr>

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery/js/jquery-1.9.1.js" type="text/javascript"></script>
<script>
  $(document).ready(function() {
    $("#esconder_ocorrencia_02").hide();
  });

 function valueChanged()
{
    if($('.determina').is(":checked"))   
        $("#esconder_ocorrencia_02").show();
    else
        $("#esconder_ocorrencia_02").hide();
}
</script>

<tr>
  <td><strong>Endere&ccedil;o Ocorr&ecirc;ncia</strong></td>
  <td><input type="text" name="txt_endereco_ocorrencia_01" size="70">&nbsp;<strong>N&uacute;mero</strong>&nbsp;<input type="text" name="txt_endereco_ocorrencia_numero" size="8">&nbsp; <input class="determina" type="checkbox" name="chk_cruzamento" id="cruzamento" value="Desligado"
      onchange="valueChanged();">&Eacute; cruzamento?<br /><br />
    <div id="esconder_ocorrencia_02"><input type="text" name="txt_endereco_ocorrencia_02" size="70"></div>
  </td>
</tr>

Use onchange in your html, to determine a more accurate call.