Array
(
    [0] => stdClass Object
        (
            [Votos_Balanceados] => 1
            [id] => 578120
            [titulo] => JQUERY Botão de Radio de acordo com a escolha apresentar DIV ou sumir.
            [dataCadastro] => DateTime Object
                (
                    [date] => 2017-03-17 15:24:43
                    [timezone_type] => 3
                    [timezone] => America/Sao_Paulo
                )

            [isFirstPost] => -1
            [idUsuario] => 194163
            [status] => A
            [isExample] => -1
            [NomeUsuario] => Angelo Brandão Miranda Santos
            [Login] => angelobms
            [Apelido] => AngeloBMS
            [Foto] => 194163_20170215113057.jpg
            [Conteudo] => Olá Mayque Souza, boa tarde !

Analisando o código JQuery, verifiquei que isto:

[code]$("divHide").hide();[/code]

deveria esta assim:

[code]$("#divHide").hide();[/code]

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

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

Mayque Souza
|
MVP
    17 mar 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:
#Código

<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:
#Código
<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>

Post mais votado

Angelobms
|
MVP
Pontos: 3605
    17 mar 2017

Olá Mayque Souza, boa tarde !

Analisando o código JQuery, verifiquei que isto:

#Código

$("divHide").hide();


deveria esta assim:

#Código
$("#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?

Angelobms
|
MVP
Pontos: 3605
    17 mar 2017

Mayque Souza,

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

#Código

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

#Código
<div id="divHide"></div>


Espero ter ter ajudado. Bons estudos !

Mayque Souza
|
MVP
    17 mar 2017


Citação:
Mayque Souza,

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

#Código

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

#Código
<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>"

#Código
<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.

Angelobms
|
MVP
Pontos: 3605
    17 mar 2017

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

#Código

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

Mayque Souza
|
MVP
    19 mar 2017

Boa tarde Agenlo,

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

Angelobms
|
MVP
Pontos: 3605
    20 mar 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.

#Código

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

Mayque Souza
|
MVP
    20 mar 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.

Angelobms
|
MVP
Pontos: 3605
    20 mar 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.

#Código

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():
#Código
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 !