jquery数据表中的复选框列答案

【问题标题】：checkbox column in jquery datatablejquery数据表中的复选框列
【发布时间】：2015-11-24 07:12:54
【问题描述】：

datatable 有这个问题

HTML 代码

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

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

}

我添加了一个复选框列作为表中的最后一列，问题是所有复选框属性仍然checked，即使我没有选中它：

示例

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

所有警报都将on 作为文本。

所以我需要知道：

这个问题的原因是什么？
如何修复我的代码？

【问题讨论】：

标签： javascript jquery html dom datatables

【解决方案1】：

为您的复选框设置值属性并使用以下代码获取仅选中复选框的值：

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

【讨论】：