Dynamically added checkbox using jquery (show checked when user clicks on Select All checkbox)

When page loads, there are 10 checkboxes. When I click on Select all check box all 10 check boxes gets selected. Now I add 10 more records dynamically (using ajax) having checkboxes (Total 20 check boxes on page). Now I click on Select All check box, Original checkboxes i.e. first 10 check boxes gets unchecked (newly added 10 are as it is i.e. unchecked). Again I click on Select All check box, at this time all 20 check boxes should get selected but nothing is getting selected.

$(".productListed").attr( "checked", true ); and $(".productListed").attr( "checked", false );

$(document).on('click', "#selectall", function(){ // my code });

I have gone through Event binding on dynamically created elements?

How to set all dynamically added checkbox to checked/unchecked when I click on Select All?