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

我使用jQuery DataTable ，工具栏上有一个checkbox ，用于检索所有记录。 由于DataTable stateSavefunction无法正常工作，我尝试使用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(' 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'); .... 

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

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