How to make entire row along with the checkbox in it, click and unclick when I anywhere click inside the table row?

Question

I have a table

<tr>
    <td><input name="service_id[]" value="17" type="checkbox"></td>
    <td class="right">$175.00</td>
    <td>add 0 days to delivery</td>
</tr>

And jQuery

$('#tableSelect tr').click(function() {
    if ($(this).find('td input:checkbox').prop('checked') == true)
        $(this).find('td input:checkbox').prop('checked', false);
    else    
        $(this).find('td input:checkbox').prop('checked', true);
});

My goal is to have the checkbox click ON and OFF as I click on anywhere in the table row.

However what I get is I can click anywhere on the table row to click and unclick, but when I click inside the checkbox itself, it does not register my click.

How can I make entire row and the checkbox in the row click and unclick when I click anywhere inside the entire table row, including entire the checkbox itself?

Answer 1

Add a click event to the inputs and then use stopPropagation to prevent event bubbling.

$('#tableSelect tr').click(function() {
  ele = $(this).find('td input:checkbox')[0];
  ele.checked = ! ele.checked;
});
$('input:checkbox').click(function(e){
  e.stopPropagation();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="tableSelect">
  <tr>
    <td>
      <input name="service_id[]" value="17" type="checkbox">
    </td>
    <td class="right">$175.00</td>
    <td>add 0 days to delivery</td>
  </tr>
</table>