如何使整行以及其中的复选框都可以单击，然后在我在表行内部单击时单击并取消单击？

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 input s 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> 

Answer 2

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

Answer 3

$('#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);
});