如何改变状态的所有复选框(在所有页面),当点击selectAll复选框[使用jQuery数据表]

How to change states of all checkboxes (in all pages) when clicked selectAll checkbox [using jQuery datatable]

本文关键字:复选框 selectAll 使用 数据表 jQuery 改变 何改变 状态      更新时间:2023-09-26

我试图通过添加复选框列来修改jQuery dataTable。我的表格由多页组成。我想添加一个选择所有复选框,当我点击它时,它需要选择所有页面中的所有复选框。我的问题是,目前它只选择当前页面上的复选框。

下面是我的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>

如果我理解你很好,你需要存储复选框状态应用时,另一个页面加载(或者你有一个SPI web?)

你可以用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
        });
    }
});

当你加载另一个页面时,你可以处理in load事件

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