How can I make the radiobutton select when I click on the image?

Question

JavaScript

<div class="subtle-pattern" style="float: left; margin-left: 15px; border: 1px solid #ccc;padding-top: 0px;">
<div class="radio">
<label>
<input type="radio" name="myshab_body_background_subtle_patterns" value="<?php echo $file; ?>" class="input-subtle-pattern" style="display">
<div id="smallfoto"><img  src="../image/subtle_patterns/<?php echo $file; ?>" width="50px" height="50px" >   </div>
</label>
</div>									
</div>

There is a code that displays an image from RADIO BUTTON, the problem is that when you click on the image, the radio button does not change the status, you need to move the mouse and click, I can’t figure out how to fix it, as I understood because of this javascript

<script>

$(document).ready(function() {

var imgBig = $('#bigfoto img');
  imgSmall = $('#smallfoto img');

imgSmall.click(function(event) {
  event.preventDefault();
  if (imgBig.attr('src') != $(this).attr('src')) {
  imgBig.hide().attr('src',$(this).attr('src'));
  imgBig.load(function() {
    $(this).fadeIn(100);
  });
  }
  imgSmall.fadeTo(500,1);
  $(this).fadeTo(500,0.6);	
});


});
</script>