CODEWITHSUNDEEP
javascriptjquery
Mark Gerryl Mirandilla
Mark Gerryl Mirandilla

Reputation: 823

Count how many are checked from generated checkbox

I'm working on a simple table that generates number of checkbox, and count the total of how many are checked.

when I unchecked, it will show how many are the remaining checked checkbox.

my problem is when I generate new rows the counter doesn't work anymore.

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

Upvotes: 0

Views: 61

Answers (2)

Karangiri goswami
Karangiri goswami

Reputation: 49

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

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 370689

Use event delegation instead, so that you only need to apply a single listener to the container, otherwise you'll have to re-add listeners to each element every time:

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

Upvotes: 3

Related Questions