Problem when displaying div by clicking radio button and other div

Question

I have a problem and I would like the help of friends:

On an item choice page I would like to make appear a div that is occult when I select the radio button option.

It works ok by clicking directly on the radio button, but the radio button is also selected by clicking on the option name in the DIV (example: Boleto Bancário). And when I click on the option name the hidden DIV does not appear.

I would like to display the DIV hidden both by clicking on the name Banking Ticket (in this case throughout the DIV) and also by clicking on the radio button.

HTML looks something like this:

$("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>

Thank you for your personal attention.

Answer 1

Put everything in the same event click and change the dial to fetch the radio value of the clicked div:

$("#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>