0

Estou com um problema e gostaria da ajuda dos amigos:

Em uma página de escolha de item 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 (no caso em toda a DIV) como também ao clicar no radio button.

O HTML é mais ou menos assim:

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

$("#campos").hide();
$('div.table-selection').click(function() { $('div').removeClass('success').find('input').prop('checked', false); $(this).addClass('success').find('input').prop('checked', true); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div>
      <div class="table-selection">
        Opção 1
        
<input type="radio" name="op" value="op1" required aria-required="true" />
  </div>
 <div class="table-selection">Opção 2

<input type="radio" name="op" value="op2" checked="checked" required aria-required="true" />
</div>
 <div class="table-selection">
       Opção 3
<input type="radio" name="op" value="op3" required aria-required="true" />
      </div>
</div>
<div id="campos">
  	Exibe instrução
  <div>

Obrigado pela atenção pessoal.

1 Resposta 1

1

Coloque tudo no mesmo evento click e altere o seletor para buscar o valor do radio da div clicada:

$("#campos").hide();
$('div.table-selection').click(function() {
   
    // busca o radio dentro da div clicada e pega o value
    var selection = $(":radio", this).val();
    // console.log(selection); 
    if(selection != "op3"){
        $("#campos").hide();
    }else{
        $("#campos").show('fast');
    }
   
   $('div').removeClass('success').find('input').prop('checked', false);
   $(this).addClass('success').find('input').prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
      <div class="table-selection">
        Opção 1
        
<input type="radio" name="op" value="op1" required aria-required="true" />
  </div>
 <div class="table-selection">Opção 2

<input type="radio" name="op" value="op2" checked="checked" required aria-required="true" />
</div>
 <div class="table-selection">
       Opção 3
<input type="radio" name="op" value="op3" required aria-required="true" />
      </div>
</div>
<div id="campos">
  	Exibe instrução
  <div>

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 .