Question

我有一张桌子

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

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

我的目标是在点击表格行中的任何位置时点击ON和OFF复选框。

然而，我得到的是我可以点击表格行的任何地方点击并取消点击，但是当我点击复选框本身时，它不会注册我的点击。

当我点击整个表格行中的任何位置时，如何单击并取消单击行中的整行和复选框，包括整个复选框本身？

Answer 1

向input添加点击事件，然后使用stopPropagation来阻止事件冒泡。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您还需要注册change event，因此请将其绑定：

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

检查以下代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

如何将整行与其中的复选框一起制作，当我在表格行内点击任何地方时单击并取消单击？

3 个答案: