checkbox column in jquery datatable

Question

I have this issue with datatable

Html code

<table id="tbldriver" class="table table-bordered table-striped">
                                            <thead>
                                                <tr style="color:white;background-color:#3c8dbc">
                                                    <th>Id chauffeur</th>
                                                    <th>Chauffeur</th>
                                                    <th> </th>

                                                </tr>
                                            </thead>
                                            <tbody id="tbldriverBody"></tbody>
                                        </table>

Javascript part

function GetFiltredDrivers() {
    $.ajax({
        type: "Get",
        url: "/api/AccountManage/GetAllChauffeurs",
        success: function (data) {
            EmptyGridFilter();
            for (var i = 0; i < data.length; i++) {
                var chauffeur = data[i];   
                $('#tbldriverBody').append('<tr><td><input type="text" readonly name="FiltredDriverAgendaModel['+i+'].Id_driver_agenda" value="' + chauffeur.id + '" />  </td>'
               + '<td><input type="text"  name="FiltredDriverAgendaModel[' + i + '].name_driver_agenda" readonly value="' + chauffeur.Nom + " " + chauffeur.Prenom + '" /></td>'
               + '<td><input type="checkbox"  name="FiltredDriverAgendaModel[' + i + '].isDriveChecked" checked="checked"  /> </td></tr>');
            }
            initGridDriver();

            } 
    });
}


function initGridDriver() {
    var table = $('#tbldriver').dataTable({
        "processing": true,
        "bPaginate": true,
        "bLengthChange": false,
        "bFilter": true,
        "bSort": false,
        "bInfo": true,
        "responsive": true,
        "scrollX": true,
        "scrollY": "200px",
        "scrollCollapse": true,
        "bAutoWidth": false,
        "language": { "url": "//cdn.datatables.net/plug-ins/1.10.7/i18n/French.json" },
        "lengthMenu": [[50, 100, 250, 500, -1], [50, 250, 500, "Tout"]],
        "destroy": true,
        "columnDefs": [
   { "width": "20%", "targets": 0 },
    { "width": "50%", "targets": 1 },
     { "width": "30%", "targets": 2 } 

        ],
        "bAutoWidth": false
    });

    $("#tbldriver tr").css('cursor', 'pointer');

}

I add a checkbox column as the last column in the table, the problem is that all checkbox properties still checked even I unchecked it :

Example

var arr = [];
    $('#tbldriver input[type=checkbox]').each(function () {
        alert($(this).val());
        if ($(this).val() == 'on') arr.push($(this).val());
    });
    console.log(arr);

All alerts take on as a text .

So I need to know :

1. What are the reasons of this problem?
2. How can I fix my code?

Answer 1

Set value attribute for your checkbox and use below code to get values of only checked checkbox :

var arr = [];
$("#tbldriver input[type='checkbox']:checked").each(function () {
    arr.push($(this).val());
});
console.log(arr);