DataTable添加checkbox实现表格数据全选,单选(点选)

$("#divTabBranInfoList").append('\n' +
            '        \n' +
            '        \n' +
            '            \n' +
            '            \n' +
            '            \n' +
            '            \n' +
            '            \n' +
            '        \n' +
            '        \n' +
            '        \n' +
            '        \n' +
            '    
branchrepoexemptionaction
'); $("#tabInfo").DataTable({ "columns": [{"data": "branch"}, {"data": "prevent"}, {"data": "exemptions"}, {"data": "action"}, {"data": "select"}], "aLengthMenu": [10, 20, 30, 40], "iDisplayLength": 10, "aoColumnDefs": [{ "sClass": "text-center", "targets": [3, 4] }, { "bSortable": false, "aTargets": [3,4] },{ "render": function (data, type) { return "
" ; }, "aTargets": -1 //最后一列 }, ], "fnDrawCallback": function () { $(this).find('thead input[type=checkbox]').removeAttr('checked'); }, "ajax": { type: "POST", url: "", data: { }, error: function () { alertError("Get Repo Branch List Error!"); }, dataSrc: function (json) { json.draw = json.data.draw; json.recordsTotal = json.data.recordsTotal; json.recordsFiltered = json.data.recordsFiltered; return json.data; } }, });

上面是表格相关内容,表格的最后一列以填加checkbox。

1. 点击全选框,对表格内容进行全选

$('#checkAll').on('click', function () {
            if (this.checked) {
                $(this).attr('checked','checked')
                $("input[name='ckb-jobid']").each(function () {
                    this.checked = true;
                });
            } else {
                $(this).removeAttr('checked')
                $("input[name='ckb-jobid']").each(function () {
                    this.checked = false;
                });
            }
        });

2.点击表格每一行选择,若某行处于没选中状态,全选框不选中

function childclick(){
        if ($(this).is(":checked") == false) {
            $("#checkAll").prop("checked", false);
        }
    }

你可能感兴趣的:(前端)