Checkbox doesnot work in table rows with jQuery chech uncheck function

I have table with checkboxes in each row. After click on table row, checkbox is checked or unchecked. That is OK. But if I click exactly inside checkbox, it doesnot work. Thank you for help.

Here is my code in FIDDLE. https://jsfiddle.net/o9w6v4pu/

<table id="table" class="table">
<tr class="bg-success">
  <th><input type="checkbox" name="param[1]" value="1" checked></th>
  <td><strong>abc</strong></td>
  <td>abc</td>
  <td>abco</td>
</tr>
<tr >
  <th><input type="checkbox" name="param[2]" value="1"></th>
  <td><strong>def</strong></td>
  <td>def</td>
  <td>def</td>
</tr>
<tr >
  <th><input type="checkbox" name="param[3]" value="1"></th>
  <td><strong>ghi</strong></td>
  <td>ghi</td>
  <td>ghi</td>
</tr>

$(document).ready(function(){

$('#table tr').click(function () {
    if($('input[type=checkbox]', this).is(':checked')) {
        $(this).removeClass('bg-success');
        $('input[type=checkbox]', this).prop('checked',false);
    }
    else {
        $(this).addClass('bg-success');
        $('input[type=checkbox]', this).prop('checked',true);
    }
});