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

Question

我用的是jQuery DataTable，工具栏上有一个checkbox是用来取回所有记录的。 As stateSave feature of DataTable does not work properly, I tried to use 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 事件中，您可以简单地存储选中状态的值，并使用它来设置重新加载 table 时生成的新复选框的 checked 属性

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

然后在datatable的回调函数中，设置checkbox的选中状态

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

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

Cannot retain checkbox value using jquery.cookie

javascript

asp.net-mvc

datatable

jquery

jquery-cookie