Table column hide/show by checkbox

  function bindCasesTable(pageIndex) {
            var Pegination = {
                PageIndex: pageIndex,
                PageSize: 5,
            }

            var model = { PegInfo: Pegination }
            $.ajax({
                url: baseUrl + 'WS/GetCases',
                type: 'post',
                data: JSON.stringify(model),
                async: false,
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    console.log(data);
                    var strGrid = "<table id='grdCases' class='display' cellspacing='0' width='100%'> <thead> "
                                + "<tr>"
                                + "<th style='display:none;'>Case ID.</th>"
                                + "<th class='RefNo'>Ref. No.</th>"
                                + "<th class='Department'>Department</th>"
                                + "<th class='SubDivision'>Sub Division</th>"
                                + "<th class='WorkName'>Work Name</th>"
                                + "<th class='Activity'>Activity Type</th>"
                                + "<th class='WorkType'>Work Type</th>"
                                + "<th class='ExpectedCompletionDate'>Expected Completion Date</th>"
                                + "<th class='WorkStatus'>Work Status</th>"
                                + "<th class='WorkProgress'>Work Progress(%)</th>"
                                + "<th class='TotalBillPaid'>Total Bill Paid</th>"
                                + "</tr></thead><tbody>";

                    for (var i = 0; i < data.length; i++) {

                        var ExpextedDate = '';
                        if (data[i].ExpectedCompletionDateString == '') {
                            ExpextedDate = '';
                        }
                        else {
                            var tempaaDate = data[i].ExpectedCompletionDateString.split("/");
                            ExpextedDate = tempaaDate[1] + '/' + tempaaDate[0] + '/' + tempaaDate[2];
                        }



                        strGrid += ("<tr onclick=\"RedirectCaseInfoDashboard(" + data[i].CaseId + ")\">" +
                                    "<td style='display:none;'>" + data[i].UpdateStamp + "</td>" +
                                    "<td class='RefNo' style='text-align:center'>" + data[i].CaseRefNum + "</td>" +
                                    "<td class='Department' style='text-align:center'>" + data[i].DepartmentName + "</td>" +
                                    "<td class='SubDivision' style='text-align:left'>" + data[i].SubDivisionName + "</td>" +
                                    "<td class='WorkName' style='text-align:left'>" + data[i].WorkName + "</td>" +
                                    "<td class='Activity' style='text-align:left'>" + data[i].ActivityTypeName + "</td>" +
                                    "<td class='WorkType' style='text-align:left'>" + data[i].WorkTypeName + "</td>" +
                                    "<td class='ExpectedCompletionDate' style='text-align:center'>" + ExpextedDate + "</td>" +
                                    "<td class='WorkStatus' style='text-align:left'>" + data[i].WorkStatusName + "</td>" +
                                    "<td class='WorkProgress' style='text-align:center'>" + data[i].WorkProgress + "</td>" +
                                    "<td class='TotalBillPaid' style='text-align:right'>" + data[i].TotalBillPaid + "</td>" +
                                    "</tr>");
                    }
                    strGrid += "</tbody></table>";

                    var str = document.getElementById('dvAllCases');
                    str.innerHTML = strGrid;

                    $('#grdCases').dataTable({
                        //"scrollY": "400px",
                        "scrollCollapse": false,
                        "paging": false,
                        "info": "",
                        "order": [[0, "desc"]],
                        //"aoColumnDefs": [{ 'bSortable': false, 'aTargets': [0] }, { 'bSortable': false, 'aTargets': [8] }],
                        "columns": [
                            { "width": "2%" },
                            { "width": "8%" },
                            { "width": "5%" },
                            { "width": "9.5%" },
                            { "width": "9.5%" },
                            { "width": "10%" },
                            { "width": "9%" },
                            { "width": "17%" },
                            { "width": "9.4%" },
                            { "width": "12.1%" },
                            { "width": "10%" }

                        ]
                    });
                    if (data.length > 0) {
                        $(".Pager").ASPSnippets_Pager({
                            ActiveCssClass: "current",
                            PagerCssClass: "pager",
                            PageIndex: pageIndex,
                            PageSize: 5,
                            RecordCount: parseInt(data[0].PegInfo.TotalRecords)
                        });
                    }

                    $(".Pager .page").on('click', function () {
                        bindCasesTable(parseInt($(this).attr('page')));
                    });

                    $('#grdCases_filter').hide();
                },
                error: function (x, y, z) {
                    alert(x.err);
                    alert(x + '\n' + y + '\n' + z);
                }
            });
        }


 $(function () {
            var $chk = $("#grpChkBox input:checkbox");
            var $tbl = $("#grdCases");

            $chk.prop('checked', true);

            $chk.click(function () {
                var colToHide = $tbl.find("." + $(this).attr("name"));
                $(colToHide).toggle();
            });
        });    


<div id="grpChkBox">
            <input type="checkbox" name="RefNo" class="input" /><span style="font-family: Arial; font-size: small; padding-right: 3px; padding-left: 3px">Ref. No </span>
            <input type="checkbox" name="Department" /><span style="font-family: Arial; font-size: small; padding-right: 3px; padding-left: 3px">Department</span>
            <input type="checkbox" name="SubDivision" /><span style="font-family: Arial; font-size: small; padding-right: 3px; padding-left: 3px">Sub Division </span>
            <input type="checkbox" name="WorkName" /><span style="font-family: Arial; font-size: small; padding-right: 3px; padding-left: 3px">Work Name </span>
            <input type="checkbox" name="Activity" /><span style="font-family: Arial; font-size: small; padding-right: 3px; padding-left: 3px">Activity Type </span>
            <input type="checkbox" name="WorkType" />
            <span style="font-family: Arial; font-size: small; padding-right: 3px; padding-left: 3px">Work Type </span>
            <input type="checkbox" name="ExpectedCompletionDate" /><span style="font-family: Arial; font-size: small; padding-right: 3px; padding-left: 3px">Expected Completion Date </span>
            <input type="checkbox" name="WorkStatus" /><span style="font-family: Arial; font-size: small; padding-right: 3px; padding-left: 3px">Work Status </span>
            <input type="checkbox" name="WorkProgress" /><span style="font-family: Arial; font-size: small; padding-right: 3px; padding-left: 3px">Work Progress </span>
            <input type="checkbox" name="TotalBillPaid" /><span style="font-family: Arial; font-size: small; padding-right: 3px; padding-left: 3px">Total Bill Paid </span>
        </div>