Adapt JQUERY to HIDE and Show

Navigation
0

I would like to adapt my JQUERY function so that when you uncheck the "It's cross" checkbox disappears the text field txt_endereco_ocorrencia_02 disappears and the txt_endereco_ocorrencia_numero field appears, only you can make the txt_endereco_ocorrencia_02 field appear when clicking on the checkbox and it does not disappear the field txt_endereco_ocorrencia_numero , already loads disabled the field txt_endereco_ocorrencia_02 when opening the form, see below, I believe that I will have to change some points: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="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>
    
asked by anonymous 29.06.2017 / 00:30

2 answers

1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="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.

    
29.06.2017 / 00:42
1

You can use .toggle() of jQuery, passing this.checked to it to know if it should show or not. There 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><scriptsrc="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>
    
29.06.2017 / 00:38
Instagram application scroll style effect [closed] Query sql codeigniter