复选框在带有 jQuery 检查取消选中功能的表行中不起作用答案

【问题标题】：Checkbox doesnot work in table rows with jQuery check uncheck function复选框在带有 jQuery 检查取消选中功能的表行中不起作用
【发布时间】：2019-01-05 01:01:18
【问题描述】：

$(document).ready(function() {
  $('#table tr').click(function() {
    if ($('input[type=checkbox]', this).is(':checked')) {
      $(this).removeClass('bg-success');
      $('input[type=checkbox]', this).prop('checked', false);
    } else {
      $(this).addClass('bg-success');
      $('input[type=checkbox]', this).prop('checked', true);
    }
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" class="table">
  <tr class="bg-success">
    <th><input type="checkbox" name="param[1]" value="1" checked></th>
    <td><strong>abc</strong></td>
    <td>abc</td>
    <td>abco</td>
  </tr>
  <tr>
    <th><input type="checkbox" name="param[2]" value="1"></th>
    <td><strong>def</strong></td>
    <td>def</td>
    <td>def</td>
  </tr>
  <tr>
    <th><input type="checkbox" name="param[3]" value="1"></th>
    <td><strong>ghi</strong></td>
    <td>ghi</td>
    <td>ghi</td>
  </tr>

我在每一行都有带有复选框的表格。点击表格行后，复选框被选中或取消选中。那没问题。但是，如果我在复选框内完全单击，它就不起作用。谢谢你的帮助。

这是我在 FIDDLE 中的代码。 https://jsfiddle.net/o9w6v4pu/

【问题讨论】：

这是因为当您选中该框时，您会立即将其更改为 checked 属性
如果您单击复选框本身，则会更改其状态。然后你的逻辑点击逻辑再次改变它的状态。有效地撤消点击。
鉴于您将翻转类作为逻辑的一部分，您可能会考虑检查它的存在，而不是检查状态，以了解您应该如何反应。最坏的情况是，您选中复选框并尝试将其设置为再次选中，因为 bg-success 不存在

标签： jquery checkbox checked

【解决方案1】：

$(document).ready(function() {
  $('#table tr').on('click', function(e) {
    var $tr = $(this);
    var $checkbox = $('input:checkbox', this);
    
    if (!$checkbox.is(e.target)) {
      // the user did not click the checkbox, so flip its state
      $checkbox.prop('checked', !$checkbox.prop('checked'));
    }
    
    //toggle the bg-success class
    $tr.toggleClass('bg-success', $checkbox.prop('checked'));
  });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" class="table">
  <tr class="bg-success">
    <th><input type="checkbox" name="param[1]" value="1" checked></th>
    <td><strong>abc</strong></td>
    <td>abc</td>
    <td>abco</td>
  </tr>
  <tr>
    <th><input type="checkbox" name="param[2]" value="1"></th>
    <td><strong>def</strong></td>
    <td>def</td>
    <td>def</td>
  </tr>
  <tr>
    <th><input type="checkbox" name="param[3]" value="1"></th>
    <td><strong>ghi</strong></td>
    <td>ghi</td>
    <td>ghi</td>
  </tr>
</table>

【讨论】：

它必须首先查找复选框，因为在这种情况下 this 是 tr 。但我会看看我是否可以编辑它来做到这一点。 @RoryMcCrossan。
好的，所以我更新了它以明确检查是否单击了复选框。它使用@RoryMcCrossan 建议的切换复选框状态

【解决方案2】：

我认为您不必担心更改选中状态。

$(document).ready(function() {
  $('#table tr').click(function() {
    if ($('input[type=checkbox]', this).is(':checked')) {
      $(this).addClass('bg-success');
    } else {
      $(this).removeClass('bg-success');
    }
  });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" class="table">
  <tr class="bg-success">
    <th><input type="checkbox" name="param[1]" value="1" checked></th>
    <td><strong>abc</strong></td>
    <td>abc</td>
    <td>abco</td>
  </tr>
  <tr>
    <th><input type="checkbox" name="param[2]" value="1"></th>
    <td><strong>def</strong></td>
    <td>def</td>
    <td>def</td>
  </tr>
  <tr>
    <th><input type="checkbox" name="param[3]" value="1"></th>
    <td><strong>ghi</strong></td>
    <td>ghi</td>
    <td>ghi</td>
  </tr>

【讨论】：