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

admin管理员组

文章数量:1320661

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

Share Improve this question Follow edited Nov 29, 2017 at 16:41 Dennis asked Mar 16, 2016 at 19:43 DennisDennis 8,1111212 gold badges7373 silver badges121121 bronze badges 1

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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);
});

本文标签：