Show hide problem on page load

Show hide problem on page load

Hello,

My form is not hidden on page load but the jquery code works perfectly as soon as I start clicking on the radial buttons. 
After the page load, the form is visible even if the second radial has been set(via php) to "checked".
Do the change() even needs a manual change? Or does it only needs a "value" change?


  1.   $(document).ready(function(){

  3.          $('[name="radios"]').on('change', function() {
  4.              var radio = $(this).val();
  5.              if(radio == "delivery"){
  6.              $("#delivery_address").fadeIn();
  7.              }else{
  8.              $("#delivery_address").hide();
  9.              }

  11.          }).change();//I have also tried without this event, same problem.
  12.  });


  1.     <div class="radio">
  2.         <label for="radios-0">
  3.             <input type="radio" name="radios" value="pickup" <?php echo $pickup; ?>>
  4.             I want to <strong>pick up</strong> my order
  5.         </label>
  6.     </div>
  7.     <div class="radio">
  8.         <label for="radios-1">
  9.             <input type="radio" name="radios" value="delivery" <?php echo $delivery; ?>>
  10.             Please <strong>deliver</strong> the order to my delivery address
  11.         </label>
  12.     </div>


  1. <div id="delivery_address" style="display: none;">    

  3. My form is here:

  5. </div|>
Thanks!