0

Gostaria de adaptar minha função JQUERY para que quando desmarcar a checkbox "É cruzamento" desapareça o campo texto txt_endereco_ocorrencia_02 e surgisse o campo txt_endereco_ocorrencia_numero, apenas conseguir fazer o campo txt_endereco_ocorrencia_02 aparecer ao clicar na checkbox e não desaparece o campo txt_endereco_ocorrencia_numero, já carrega desabilitado o campo txt_endereco_ocorrencia_02 ao abrir o formulário, vejam abaixo, acredito que terei de mudar alguns pontos:

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

2 Respostas 2

1

<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 no seu html, para determinar uma call mais precisa.

1
  • Obrigado pela dica, funcionou muito bem amigo. Commented 3/07/2017 às 13:08
1

Podes usar o .toggle() do jQuery, passando-lhe o this.checked para ele saber se deve mostrar ou não. Aí o código é somente:

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

Exemplo:

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

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 .