单击selectAll复选框时如何更改所有复选框（在所有页面中）的状态[使用jQuery数据表]

Question

我正在尝试通过添加复选框列来修改 jQuery 数据表。我的表由多个页面组成。我想添加一个全选复选框，当我单击它时，它需要选择所有页面中的所有复选框。我的问题是，目前它只选择当前页面上的复选框。

这是我的html代码：

<div id="results_table">

  <h3>Results</h3>
        <div>
        <h5 style="float:left;">Results - Table</h5>
        <button id="download-json" class="btn" style="float:right;"><i class="icon-download"></i> Get JSON</button>
        <button id="download-csv" class="btn" style="float:right;"><i class="icon-download"></i> Get CSV</button>
        </div>
        <br>
        <table id="example" class="display" width="100%"></table>
        <div id="results_container">

        <p>Execute a query first!</p>

        </div>
    </div>

Answer 1

如果我理解你的话，你需要存储复选框状态以在另一个页面加载时应用（或者你有一个 SPI 网络？）

您可以使用 Javascript 存储在sessionStorage：

var storage = window.sessionStorage; // initialize storage object

$('input[type="checkbox"][name="selectAll"]').click(function(){
    if($(this).prop("checked") == true){
        $(':checkbox').each(function() {
            this.checked = true;
            storage.setItem("checkALL", true); // save state
        });
    }
    else if($(this).prop("checked") == false){
        $(':checkbox').each(function() {
            this.checked = false;  
            storage.setItem("checkALL", false);  //save state
        });
    }
});

当你加载另一个页面时，你可以在加载事件中处理

$(document).ready(function() {
     var storage = window.sessionStorage;
     $('input[type=checkbox]').each(function() {
         $(this).prop('checked', storage.getItem("checkALL")); // set state
     });
});