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

Question

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> 

Answer 1

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> 

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>