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?

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?

• javascript
• jquery
• checkbox

• When you click the checkbox, it is immediately ticked as checked, then the click handler kicks in, sees that the checkbox is checked, and unchecks it. Or in the opposite order, but the result is the same. – dannyjolie Commented Mar 16, 2016 at 19:52

3 Answers 3

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./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>

You need to register change event also, so bind it like this:

$('#tableSelect tr').on('click change',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);
});

Check the below snippet

$('#tableSelect tr').on('click change', 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);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/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>
  <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>
  <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>
  <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>
  <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>
  <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>
  <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>
  <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>

$('#tableSelect tr *').click(function(e) {
  var $cb = $(this).parent('tr').find('input[type=checkbox]');
  var c = $cb.prop('checked');
  if (c === undefined)
    e.stopPropagation();
  else
    $cb.prop('checked', !c);
});