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

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 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?

score 0 · Answer 1 · answered Jul 14 '15 at 07:17

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)
    });
});

Just found that, attr("checked", true) is not working here. But when I used .prop("checked", true) It worked...! Thanks — Mangesh Sathe, Jul 14 '15 at 07:31

score 0 · Answer 2 · answered Jul 14 '15 at 07:33

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);
     }
 });
});

score 0 · Answer 3 · answered Jul 14 '15 at 07:34

0

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 });

answered Jul 14 '15 at 07:34

Mangesh Sathe

1,987
4
21
40

You do not need to use exactly this construction to capture dinamically added elements. You need this construction if you bind an event handler to element with id 'selectAll', and in future to handle a click on dynamically added another element with id 'selectAll'. But remember that id must be unique on the page. In your case $('#selectAll').click(...) is enaugh. Checkboxed are dynamically added but not 'selectAll' – Viktor Kireev Jul 14 '15 at 07:40

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

3 Answers3