jQuery Botão de Radio de acordo com a escolha apresentar DIV ou sumir.

jQuery

HTML

JavaScript

17/03/2017

Bom dia a todos,

Gostaria que me auxiliassem em um código que estou desenvolvendo em Jquery. Preciso que o mesmo ao clicar no botão de Rádio "SIM" apresente uma determinada DIV e ao clicar em "NÃO" ele recolha essa DIV dinamicamente.
Segue código para análise:

FUNÇÃO JQuery:


<script type="text/javascript">

        //FUNCAO PARA ESCONDER E APRESENTAR CAMPOS
        $(document).ready(function(){
            $("input[name$='checkBoxSubordinado']").click(function(){
                var test = $(this).val();

                $("div.desc").hide();

                if (test == 'possui') {
                    $("#divHide").show();
                }else{
                    $("divHide").hide();
                }
            });
        });
    </script>


HTML:


<tr>
                            <td colspan="2">
                                <label for="subordinado" class="control-label labelTab2">Possui subordinados?</label>
                                <label class="radio-inline col-md-offset-4">
                                    <input type="radio" name="checkBoxSubordinado" id="possui" value="sim">SIM
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="checkBoxSubordinado" id="naoPossui" value="nao" checked>NÃO
                                </label>
                            </td>
                        </tr>
Salute Especializadas

Salute Especializadas

Curtidas 0

Melhor post

Angelo Santos

Angelo Santos

17/03/2017

Olá Mayque Souza, boa tarde !

Analisando o código JQuery, verifiquei que isto:

$("divHide").hide();


deveria esta assim: 

$("#divHide").hide();


No código HTML que você postou não identifiquei a tag DIV com o id divHide. Quem seria "div.desc" no seu código HTML?
GOSTEI 1

Mais Respostas

Angelo Santos

Angelo Santos

17/03/2017

Mayque Souza,

Esta é a correção para o seu código JQuery:

<script type="text/javascript">
        //FUNCAO PARA ESCONDER E APRESENTAR CAMPOS
        $(document).ready(function(){
            $("#divHide").hide();
            $("input[name$='checkBoxSubordinado']").click(function(){
                var test = $(this).val();                                
                if (test == 'sim') {
                    $("#divHide").show();
                }else{
                   $("#divHide").hide();
                }
            });
        });
    </script>


No seu código HTML deve existir: 

<div id="divHide"></div>


Espero ter ter ajudado. Bons estudos !
GOSTEI 1
Salute Especializadas

Salute Especializadas

17/03/2017

Mayque Souza,

Esta é a correção para o seu código JQuery:

<script type="text/javascript">
        //FUNCAO PARA ESCONDER E APRESENTAR CAMPOS
        $(document).ready(function(){
            $("#divHide").hide();
            $("input[name$='checkBoxSubordinado']").click(function(){
                var test = $(this).val();                                
                if (test == 'sim') {
                    $("#divHide").show();
                }else{
                   $("#divHide").hide();
                }
            });
        });
    </script>


No seu código HTML deve existir: 

<div id="divHide"></div>


Espero ter ter ajudado. Bons estudos !


Olá Angelo,

Obrigado pela resposta.
Efetuei as alterações sugeridas porém ainda sem sucesso. Seria algum problema na importação do jQuery? Segue as importações das TAGs "<script>"

<head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>SGA_RH</title>
        <link href="css/layout.css" rel="stylesheet" type="text/css" />
        <link href="css-lvto-func/bootstrap.min.css" rel="stylesheet">
        <link href="css-lvto-func/sgafolhaestilo.css" rel="stylesheet">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script type="text/javascript">


Obrigado.
GOSTEI 0
Angelo Santos

Angelo Santos

17/03/2017

Poder ser que seja. Testa importando o JQuery dessa forma:

<script
			  src="https://code.jquery.com/jquery-3.2.0.min.js"
			  integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I="
			  crossorigin="anonymous"></script>
GOSTEI 1
Salute Especializadas

Salute Especializadas

17/03/2017

Boa tarde Agenlo,

Efetuei a importação da maneira que me sugeriu, porém, sem resultado.
GOSTEI 0
Angelo Santos

Angelo Santos

17/03/2017

Mayque Souza, Bom dia!

Copia o seguinte código e salva como um arquivo HTML e testa abrindo em um browser ou testa ele aqui link. Esta funcional. Aproveita e verifica se a estrutura no seu código esta igual. Perceba que a chamada da função javascript esta depois da tag body.

<htm>
    <head>
        <script
        src="https://code.jquery.com/jquery-3.2.0.min.js"
        integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I="
        crossorigin="anonymous"></script>
    </head>
    <body>
      <table>
        <tr>
          <td colspan="2">
          <label for="subordinado" class="control-label labelTab2">Possui subordinados?</label>
          <label class="radio-inline col-md-offset-4">
          <input type="radio" name="checkBoxSubordinado" id="possui" value="sim">SIM
          </label>
          <label class="radio-inline">
          <input type="radio" name="checkBoxSubordinado" id="naoPossui" value="nao" checked>NÃO
          </label>
          </td>
          </tr>    
      </table> 
      <br />
      <div id= "divHide">
        TESTE DIV
      </div>
    </body>       
    <script type="text/javascript">
        //FUNCAO PARA ESCONDER E APRESENTAR CAMPOS
        $(document).ready(function(){
            $("#divHide").hide();        
            $("input[name$='checkBoxSubordinado']").click(function(){
                var test = $(this).val();                    
                if (test == 'sim') {
                    $("#divHide").show();
                }else{
                    $("#divHide").hide();
                }
            });
        });
    </script>    
</htm>
GOSTEI 1
Salute Especializadas

Salute Especializadas

17/03/2017

Grande amigo Angelo,

Problema resolvido com seu código, apenas ajustei para atender minhas necessidades funcionou perfeitamente. O que poderia ser? Gostaria muito de saber para que pudesse resolver problemas desse tipo futuramente rs.

Muito obrigado amigo, um grande abraço.
GOSTEI 0
Angelo Santos

Angelo Santos

17/03/2017

Vlw Mayque Souza,

Fico feliz em saber que ajudei a resolver o seu problema.
Com relação ao que estava ocorrendo para seu código não está funcionando, eu citei alguns erros no desenvolvimento da função javascript (JQuery) na interação que fizemos.

Um outro problema na função foi que o atributo "test" guarda o valor atribuído no atributo 'value' da tag 'input' do seu html. Se verificar o value atribuido é "sim". Você estava realizando o teste com o valor do id do atributo que é 'possui' conforme abaixo.

var test = $(this).val();
if (test == 'possui') {
...
}


O atributo do id da div deve ser igual ao que você esta utilizando para realizar o hide() ou o show():
HTML: <div id= "divHide"></div>
JQuery: $("#divHide").show();


Aconselho realizar o curso JavaScript Completo para aprimoramento dos seus conhecimentos.

Nada mais justo que um like nas respostas. Forte abraço e bons estudos !
GOSTEI 0
POSTAR