If Radio button checked show div

Question

I have HTML CODE below:

$('input[type="radio"]').click(function(){
  
  if($(this).attr("value")=="ABC"){
    $(".Box").hide('slow');
  }
  if($(this).attr("value")=="PQR"){
    $(".Box").show('slow');

  }        
});

<table>
  <tr>
    <td align="left" height="45">

      <input type="radio" class="radioBtn" name="Radio" 
             id="Radio" value="ABC" required>
      ABC

      <input class="radioBtn" type="radio" name="Radio" 
             id="Radio" value="PQR"  required>
      PQR

      <div class="Box" style="display:none">Text</div>
    </td>
  </tr>
</table>

All above code is working fine & properly. But my issue is that when I checked by default PQR then the Box div should display with clicking radio button. What wrong in my code or what changes it need..??

Answer 1

you need to trigger the click

$(document).ready(function () {

    $('input[type="radio"]').click(function () {
        if ($(this).attr("value") == "ABC") {
            $(".Box").hide('slow');
        }
        if ($(this).attr("value") == "PQR") {
            $(".Box").show('slow');

        }
    });

    $('input[type="radio"]').trigger('click');  // trigger the event
});

DEMO

Answer 2

what i understood with your this statement is something like below:

<input class="radioBtn" type="radio" name="Radio" id="Radio" value="PQR" checked>

means you are keeping your PQR checked by default...if so.. then below solution will work fine for you...

i am not so good is javascript but ..hope this help..

$(document).ready(function(){

if($('input[name="Radio"]').attr("value")=="PQR"){
  $(".Box").show('slow');
}
if($('input[name="Radio"]').attr("value")=="ABC"){
  $(".Box").hide('slow');
}

$('input[type="radio"]').click(function(){
    if($(this).attr("value")=="ABC"){
        $(".Box").hide('slow');
    }
    if($(this).attr("value")=="PQR"){
        $(".Box").show('slow');

    }        
});
});