无法使用 jquery.cookie 保留复选框值

Question

我使用jQuery DataTable，工具栏上有一个checkbox，用于检索所有记录与否。由于DataTable 的stateSave 功能无法正常工作，我尝试使用jquery.cookie 以在重新加载DataTable 后保留复选框值（因为每次重新加载时都会动态重绘复选框），如下所示：

$(document).ready(function() {

    $('#example').DataTable( {

        //code omitted for brevity
        "serverSide": true,
        "ajaxSource": "/Student/GetStudents",
        "fnServerData": function (sSource, aoData, fnCallback) {
            /* Add some extra data to the sender */
            aoData.push({ "name": "isAll", "value": $("#cbIsAll").is(":checked") });
            $.getJSON(sSource, aoData, function (json) { 
                /* Do whatever additional processing you want on the callback, then tell DataTables */
                fnCallback(json);
            });
        },
        "fnDrawCallback": function() {
            $("div.toolbar").html('<input type="checkbox" id="cbIsAll" name="demo" /> Get all records');
        }
    });


    $(document).on('change', '#cbIsAll', function () {
        var isClicked = $('#cbIsAll').is(':checked') ? true : false;
        $.cookie('clicked', isClicked, { expires: 1 }); // expires in 1 day
        table.ajax.reload();
        $('#cbIsAll')[0].checked = ($.cookie('clicked') == "true") ? true : false;
    });     

});

调试代码后，我看到虽然$('#cbIsAll')[0].checked 行正确执行为true，但checkbox 在此行之后丢失了值。你能澄清一下错误在哪里吗？还是有更好更聪明的方法来保持checkbox 的价值？

Answer 1

在您的情况下没有理由使用$.cookie。在复选框change 事件中，您可以简单地存储选中状态的值，并使用它来设置重新加载表格时生成的新复选框的checked 属性

var isChecked;
$(document).on('change', '#cbIsAll', function () {
    // Store the current value
    isChecked = $(this).is(':checked');
    ....

然后在数据表的回调函数中，设置复选框的选中状态

$('#cbIsAll').prop('checked', isChecked);