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

when page loads, there 10 checkboxes. when click on select all check box 10 check boxes gets selected. add 10 more records dynamically (using ajax) having checkboxes (total 20 check boxes on page). click on select all check box, original checkboxes i.e. first 10 check boxes gets unchecked (newly added 10 i.e. unchecked). again click on select all check box, @ time 20 check boxes should selected nothing getting selected.

$(".productlisted").attr( "checked", true ); , $(".productlisted").attr( "checked", false );

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

i have gone through event binding on dynamically created elements?

how set dynamically added checkbox checked/unchecked when click on select all?

i don't think case of event binding of dynamically created elements. have created working example - see http://jsfiddle.net/qwt7s0a7/

html

<div class="container">     <input class="cb" type="checkbox"/> </div> <button id='add'>add checkbox</button> <button id='selectall'>select all</button> 

js

$(function(){     $('#add').click(function(){         $('.container').append('<input class="cb" type="checkbox"/>');     });     $('#selectall').click(function(){         var checked = $('.container .cb').first().prop('checked');         $('.container .cb').prop('checked', !checked)     }); });