javascript - 计算从生成的复选框中选中了多少个

Question

我正在开发一个简单的表格，它生成复选框的数量，并计算选中的总数。

当我取消选中时，它会显示剩余的选中复选框数量。

我的问题是当我生成新行时计数器不再工作。

$('.items').keyup(function() {
  var items = $(this).val();

  $('span').text(items);
  $('table tbody tr').remove();

  for (var i = 1; i <= items; i++) {
    $('table > tbody').append('<tr><td><input type="checkbox" checked></td></tr>');
  }
});

$('input:checkbox').click(function() {
  var count = $(this).closest('table').find('input:checkbox:checked').length;
  $('span').text(count);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="">
  Items
</label>
<input type="text" class="items">
<span>4</span>
<table>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" checked>
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" checked>
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" checked>
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" checked>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

改用事件委托(delegate)，这样您只需向容器应用一个监听器，否则每次都必须向每个元素重新添加监听器:

$('.items').keyup(function() {
  var items = $(this).val();
  $('span').text(items);
  $('table tbody tr').remove();
  for (var i = 1; i <= items; i++) {
    $('table > tbody').append('<tr><td><input type="checkbox" checked></td></tr>');
  }
});

$('table').on('click', 'input', function() {
  var count = $(this).closest('table').find('input:checkbox:checked').length;
  $('span').text(count);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="">
  Items
</label>
<input type="text" class="items">
<span>4</span>
<table>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" checked>
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" checked>
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" checked>
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" checked>
      </td>
    </tr>
  </tbody>
</table>