将行动态添加到datatable后，复选框不起作用

Question

Im使用AJAX向datatable添加多行，其中包含一个复选框作为元素。我已经为复选框编写了一个代码，在选择/取消选择'select-all'之后，tbody中的所有子复选框都应该相应地被选中或取消选中。并且在手动选择/取消选择任何子复选框后,“选择-全部”复选框应该会更改。但这部分不起作用。

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

$("#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);
        }
    });

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

Answer 1

请尝试此代码

$("#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;
     }
    })
  })

下面是示例代码

$(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>