Checkboxes are not working after adding rows dynamically to the datatable

Question

Im adding multiple rows using AJAX to the datatable which contains a checkbox as a element. I have written a code for the checkboxes that after selecting/deselecting 'select-all', all child checkboxes in tbody should get checked or unchecked accordingly.. And after selecting/deselecting any child checkboxes manually, 'select-all' checkbox should change. But this part is not working.

HTML CODE:

<table id="user" class="w3-table-all w3-hoverable w3-card-4 display">
                <thead>
                    <tr class="w3-light-grey">
                        <th><input type="checkbox" class="w3-check" id="select-all"></th>
                        <th>User Id</th>
                        <th>Username</th>
                        <th>Full Name</th>
                        <th>Activated Date</th>
                        <th>Last Login Date</th>
                    </tr>
                </thead>
                <tbody id="body">

                </tbody>
</table>

JQuery for checkboxes:

$("#select-all").change(function(){ 
        $(".checkbox").prop('checked', $(this).prop("checked"));
    });


    $('.checkbox').change(function(){ 
        if(false == $(this).prop("checked")){ 
            $("#select-all").prop('checked', false); 
        }

        if ($('.checkbox:checked').length == $('.checkbox').length ){
            $("#select-all").prop('checked', true);
        }
    });

DATATABLE and AJAX FUNCTION CODE:

var table =  $('#user').DataTable({
        "columns": [
            { "orderable": false },
            null,
            null,
             null,
             null,
            null,
          ],
        "order": [[ 1, "asc" ]]
     });

 $.ajax({
url: 'data.json',
dataType: 'json',
success: function(data) {
    for (var i=0; i<data.length; i++) {
        if(data[i].enabled==1)
        var row1 = $('<tr><td><input type="checkbox" class="w3-check checkbox" value=""></td><td>' + data[i].id+ '</td><td>' + data[i].username + '</td><td>' + data[i].first_name + ' ' + data[i].middle_name + ' ' + data[i].last_name + '</td><td>' + data[i].activated_date + '</td><td>' + data[i].last_login + '</td></tr>');
      table.rows.add(row1);
        table.draw();
        $("#body").append(row1);  
    }
},
error: function(jqXHR, textStatus, errorThrown){
    alert('Error: ' + textStatus + ' - ' + errorThrown);
}
});

vinayakj · Accepted Answer · 2018-03-25 18:36:37Z

1

Try this code

$("#user").on("click", "#select-all").change(function(){ 
        $(".checkbox").prop('checked', $(this).prop("checked"));
    });

$("#user").on("click", ".checkbox", function() {
    $("#select-all").prop('checked', true)
    $("#user").find(".checkbox").each(function() {
      if (!$(this).prop('checked')){
        $("#select-all").prop('checked', false);
      return;
     }
    })
  })

Here is sample code

$(function() {

  //handler for selectall change
  $('#selectAll').change(function() {
    $("input[name='msisdn[]']").prop('checked', $(this).prop('checked'))
  })

  //handler for all checkboxes to refect selectAll status
  $("input[name='msisdn[]']").change(function() {
    $("#selectAll").prop('checked', true)
    $("input[name='msisdn[]']").each(function() {
      if (!$(this).prop('checked')){
        $("#selectAll").prop('checked', $(this).prop('checked'));
        return;
      }
    })
  })

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="multiple_msisdn">
  <label class="exp">
<input type="checkbox" class="exp" id="selectAll"> -- Select All -- </label>
  <label class="exp">
<input type="checkbox" class="exp" name="msisdn[]" value="1">&nbsp;ABC [xxxxxxxx]</label>
  <label class="exp">
 <input type="checkbox" class="exp" name="msisdn[]" value="18">&nbsp;ABC [xxxxxx]</label>
</div>

edited Mar 25, 2018 at 18:36

answered Mar 25, 2018 at 15:46

vinayakj

5,7013 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

mandy Over a year ago

Tried your code..its working only for the tbody rows already written just like your sample code. But it fails after adding rows through ajax. On deselecting/selecting 'select-all' tbody checkboxes are changing perfectly but after deselecting any tbody checkboxes, 'select-all' is not changing

vinayakj Over a year ago

try creating a jsFiddle

mandy Over a year ago

its your given code only..that you have written as sample.. here is another jsfiddle link.. please help me out jsfiddle.net/0j7e8wpx/15

vinayakj Over a year ago

Im on it.. but sample code was for your reference I also gave actual code related to your template at start of answer

mandy Over a year ago

can you tell me how can i assign differemt values to this checkboxes , store it in a array and send it to server

Collectives™ on Stack Overflow

Checkboxes are not working after adding rows dynamically to the datatable

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related