使用jquery动态添加的复选框（当用户单击“全选”复选框时显示选中状态）

Question

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 ie first 10 check boxes gets unchecked (newly added 10 are as it is ie 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 ?

Answer 1

I don't think this is the case of event binding of dynamically created elements. I have created a 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)
    });
});

Answer 2

Please find the sample code below and example at: https://jsfiddle.net/vv48fh3t/

Html

<input type="button" id="btnCheckAll" value="Check All"/>
<input type="button" id="btnAddNew" value="Add checkbox" >
<div class="checkDiv">
    <input type="checkbox" class="chk"/>check 1
    <input type="checkbox" class="chk"/>check 2
    <input type="checkbox" class="chk"/>check 3
    <input type="checkbox" class="chk"/>check 4
</div>

JS

$(document).ready(function(){
    $("#btnCheckAll").click(function(){
    $(".chk").each(function(){
    $(this).prop("checked","checked");
    });
  });

  $("#btnAddNew").click(function(){
     for(var i=0;i<5;i++){
     $(".checkDiv").append("<input type='checkbox' class='chk'/>check "+i);
     }
 });
});

Answer 3

I Used .prop("checked", true) instead of attr( "checked", true )

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

Also use this whenever you want to read any dynamically added element on HTML document page.

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