Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

RafaCordL

Div só aparecer quando radio for selecionado

Recommended Posts

Pessoal, tenho a div "endereco_div", e tenho uma pergunta com o radio para Sim e Não, gostaria que ela só mostrasse o conteúdo na tela fosse pressionado o Sim, e o Não escondesse (caso estivesse a mostra).

 

Dai fiz assim ...

function abrirEndereco(){ 
    $("input[name='most_end']").on('click',function(){
        var valor = $(this).prop('radio');
        if (valor) {
            $("#endereco_div").show();
        } else {
            $("#endereco_div").hide();
        }
    });
}

Só que como o name é o mesmo e o que diferencia no radio é o value, queria saber como fica aqui. E também quero que ao carregar a página a div fique já oculta.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Quais os values possíveis ?

 

Para esconder ao carregar a página, basta chamar:

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Fiz uma alteração, mas ainda não funciona corretamente. O Sim abre, mas o Nao não fecha...

function abrirEndereco(){ 
    $("#most_end").on('click',function(){
        if ($('#most_end').val() == 'Sim') {
            $("#endereco_div").show();
        } else if ($('#most_end').val() == 'Nao') {
            $("#endereco_div").hide();
        }
    });
}
<input type="radio" id="most_end" name="most_end" class="label_margin_4" value="Sim">
<input type="radio" id="most_end" name="most_end" class="label_margin_4" value="Nao">

Compartilhar este post


Link para o post
Compartilhar em outros sites

Aparente você está utilizando apenas um true - or - false.. Não seria melhor utilizar um checkbox??

De qualquer forma, utilize .on('change').


E, IDs devem ser unicos. E prop('radio') nao existe. O correto seria 'checked'.

Veja: http://jsfiddle.net/g3v83cs6/


Com checkbox: http://jsfiddle.net/ozzhyupz/

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá RafaCordL, blza!

 

Tenho esse, veja se ajuda:

<script>
function nao() {
  document.getElementById('MMDiv').style.visibility='visible';
  document.getElementById('QTDiv').style.visibility='hidden';
  }

function sim() {
  document.getElementById('QTDiv').style.visibility='visible';
  document.getElementById('MMDiv').style.visibility='hidden';
  }
</script>
<form>
<input type="radio" name="printer" onclick="sim();">Sim
<input type="radio" name="printer" onclick="nao();">Nao

<div id="MMDiv" valign="middle" align="left" style="visibility: hidden;"></div>

<div id="QTDiv" style="visibility:hidden">
Boa tarde           
</div>
</form>

Espero ter ajudado,

 

vlw

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.