Javascript 如何在带有复选框的google可视化表中保持复选框状态

我正在使用谷歌可视化表并在列表中添加复选框。我想选择一些带有复选框的行，并对这些选中的行执行一些操作。但是，当调用排序或页面事件时，表将被重新绘制，复选框将取消选中

表格排序或页面更改后，如何保持复选框状态

---

谢谢

在调用事件之前，您可以执行以下操作来保存复选框的选中状态：

  var checkboxes = document.querySelectorAll("#table_div input[type=checkbox");
  var checkboxesState = {};
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener("change", function(){
      checkboxesState[this.getAttribute("id")] = this.checked;
    });
  }

调用事件后，将其还原：

    google.visualization.events.addListener(table, 'sort', function(ev) {
       //Needed, since the whole table DOM will change
       checkboxes = document.querySelectorAll("#table_div input[type=checkbox");
          for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxesState[checkboxes[i].getAttribute("id")]){
              checkboxes[i].checked = checkboxesState[checkboxes[i].getAttribute("id")];
            }
          }
    });

---

谢谢，你能编辑小提琴吗？我会尝试一下。完成后，我也对答案进行了必要的修改。谢谢，这有帮助，但对“page”事件不起作用。出于某种原因，还有一件事我必须解释，在page change上，所有的表DOM都会刷新，因此，您需要在复选框上添加新的侦听器，就像我在这里所做的那样