title: Dynamically added checkbox using jquery (show checked when user clicks on Select All checkbox)
body: <p>When page loads, there are 10 checkboxes. When I click on <code>Select all</code> 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 <code>Select All</code> 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 <code>Select All</code> check box, at this time all 20 check boxes should get selected but nothing is getting selected.</p>
  
  <p><code>$(".productListed").attr( "checked", true );</code> and <code>$(".productListed").attr( "checked", false );</code></p>
  
  <pre><code>$(document).on('click', "#selectall", function(){ // my code });
  </code></pre>
  
  <p>I have gone through <a href="https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements">Event binding on dynamically created elements?</a></p>
  
  <p>How to set all dynamically added checkbox to checked/unchecked when I click on <code>Select All</code>?</p>