Show/Hide div using a radio button

Question

Well I need to check the state of mine radio button to make sure that if he is active in "Yes", he opens the <div class="camposExtras">, click on "Not" he closes the div, and this should be accessible at all times.

Mine radio button down below:

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

And mine div is:

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

I’m trying to do it like this:

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

But you’re not giving me anything back.

Answer 1

You weren’t far from getting the code to work.
Instead of pointing to the class .FlgPontua, you have to point to the 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>

<input type="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>