Show / Hide div using a 'radio button'

Question

Show / Hide div using a 'radio button'

Navigation

#1 by (2 votes)

1

I need to check the status of my radio button so that if it is active on "Yes" , it opens <div class="camposExtras"> , if you click "No" It closes div , and this should be accessible at all times.

My radio button below:

<input type="radio" class="FlgPontua" name="FlgPontua" value="Sim" checked>
<input type="radio" class="FlgPontua" name="FlgPontua" value="Nao">

And my div is:

<div class="camposExtras">
    Aqui vem os dados que é para esconder ou aparecer
</div>

I'm trying to do this:

$(".FlgPontua").change(function() {
   console.log('entro aqui')
   if ($(this).val() == "Sim") {
      $('.camposExtras').show();
   }else{
      $('.camposExtras).hide();
   }
});

But it's not coming back to me.

javascript html jquery

asked by anonymous 10.09.2016 / 03:39

1 answer

What better way to solve slowness to generate report? Customize the Nginx error message

score 2 · Accepted Answer

You were not too far from getting the code working. Instead of pointing to class .FlgPontua , you have to point to name="FlgPontua" .

$('input[name="FlgPontua"]').change(function () {
    if ($('input[name="FlgPontua"]:checked').val() === "Sim") {
        $('.camposExtras').show();
    } else {
        $('.camposExtras').hide();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><inputtype="radio" name="FlgPontua" value="Sim" checked>
<input type="radio" name="FlgPontua" value="Nao">

<div class="camposExtras">
    Aqui vem os dados que é para esconder ou aparecer
</div>