计算从生成的复选框中检查了多少

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

改为使用事件委托，这样您只需要将单个侦听器应用于容器，否则每次都必须为每个元素重新添加侦听器：

$('.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>

Answer 2

$('.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 class="checkeboxclass" type="checkbox" checked></td></tr>');
  }
});

$('input[type="checkbox"]').on( "change", function() {
  var count = $('input[type="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>