Jump to content
dieef5

Problema ao exibir Div ao clicar em radio button e outra div

Recommended Posts

Boa noite pessoal,

 

Estou com um problema e gostaria da ajuda dos amigos:

Em uma página de escolha de forma de pagamento gostaria de fazer aparecer uma div que está oculta quando seleciono a opção pelo radio button.

Funciona ok clicando direto no radio button, porém o radio button também é selecionado ao clicar sobre o nome da opção na DIV (exemplo: Boleto Bancário). E quando clico sobre o nome da opção a DIV oculta não aparece.

 

Gostaria de exibir a DIV oculta tanto ao clicar sobre o nome Boleto bancário como ao clicar no radio button.

 

o html é mais ou menos assim:

<div class="selection row">
  <div class="col-xs-6 text-left"><strong>Boleto Bancário</strong> 10% de Desconto</div>
  <div class="col-xs-6 text-right"><input type="radio" name="payment" value="boleto" checked="checked" /></div>
</div>

<div id="campos">
  	Exibe instrução
  <div

 

Meu jquery está assim:

$("input[name=payment]").change(function(data){ 
    var selection = $("input[name=payment]:checked").val();
    console.log(selection); 
    if(selection != "boleto")
        $("#campos").hide();
    else
        $("#campos").show('fast');
});

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

 

VLw pessoal..

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By s3c0
      Boa tarde galera,
       
      estou precisando que a barra superior acompanhe o Scroll. Está funcionando de acordo com o propósito, porém se der um Refresh no meio da página por exemplo, a barra superior não aparece.
       
      $("document").ready(function($){ $(window).scroll(function () { if ($(this).scrollTop() > 68) { $('.topo').fadeIn(); $('.topo').css("position","fixed") $('.topo').css("z-index","2") $('.topo').css("margin-top","-68px") } else { $('.topo').css("position","absolute") $('.topo').css("z-index","1") $('.topo').css("z-index","2") $('.topo').css("margin-top","0px") } }); });  
      Alguém possui alguma ideia do que está errado?
    • By CharlieAldrin
      Estou tentando fazer um chat, e nele é necessário saber se um usuário continua na página do chat, para caso ele saia informar o outro usuário.
      Encontrei em alguns lugares como solução fazer um ajax conferindo se o usuário está "dando sinal de vida" de 10 em 10 segundos (por exemplo), porém não entendi como fazer isso e nem como colocar no código. Alguém pode me ajudar por favor? 
      Ou me informar se existe alguma forma melhor de conferir isso?
       
      Valeu desde já :) 
    • By s3c0
      Olá amigos,
       
      estou tentando fazer um slide com JQUERY de troca de DIV, porém não estou conseguindo sem uso de plugins.
       
      A ideia seria a hora que abrir o modal, mostrar as "Colunas" 1 e 2, e com o tempo mudar para 3 e 4 em loop infinito.
      Coloquei 2 "botões" somente para ir testando o código, porém não consegui realizar o slide corretamente.
       
      Alguém teria alguma sugestão?
       
      <div class="modal_banner"> <a class="fechar_modal" onclick="javascript:close_modal_banner();"><svg aria-hidden="true" focusable="false" data-prefix="fas" id="btn_modal" width="30" data-icon="times-circle" class="svg-inline--fa fa-times-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg></a> <div class="topo_modal"> <span id="logo_modal"><img src="logo.png" width="150px"></span> <span id="texto_topo"><p>texto</p><span></div> <div style="top: 50%;left: -20px;-ms-transform: translate(-0%, -50%);transform: translate(-0%, -50%);position: absolute;"><a style="cursor:pointer;" id="seguinte" onclick="esquerda();"><svg width="30px" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" class="svg-inline--fa fa-chevron-left fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></svg></a></div> <div class="corpo_modal_banner"> <div class="product-item"> <div class="products-row" style=""> <div class="coluna" >1</div> </div> <div class="products-row" style=""> <div class="coluna" >2</div> </div> <div class="products-row" style=""> <div class="coluna">3</div> </div> <div class="products-row" style=""> <div class="coluna">4</div> </div> <div style="top: 50%;right: -20px;-ms-transform: translate(-0%, -50%);transform: translate(-0%, -50%);position: absolute;"><a style="cursor:pointer;" id="anterior" onclick="direita();"><svg width="30px" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg></a></div> </div> </div> </div> function esquerda(){ $('.products-row').hide("slide", { direction: "left" }, 500); }; function direita(){ $('.products-row').hide("slide", { direction: "right" }, 500); };  
      Agradeço a atenção de todos!
    • By altyouth
      Sou iniciante, e estou tentando utilizar JQuery em um projeto, estou fazendo sua instalação via npm, e incluindo o escopo global no arquivo js. Mas quando abro a pagina e verifico o console, o mesmo aponta erro no $ do escopo global dizendo que nao foi referenciado. Ja pesquisei sobre pra ver se conseguia resolver, mas o problema persiste. 
    • By danicarla
      OI gente, gostaria de de ideias de como posso desenvolver um player que tenha mais de uma faixa...

      Algo semelhante a isso: https://www.karaoke-version.com/custombackingtrack/u2/beautiful-day.html
       
      Alguém tem alguma idéia de como fazer?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.