選中取消選中使用數據表時，所有復選框都不適用於所有頁面

Question

腳本：

$(document).ready(function() {
    $(function(){
        $("#result").dataTable({ 
            "scrollX" : true, 
                "ordering" : true,
                "order": [[ 1, "asc" ]],
                "info" : true, 
                });
        });  
    $("#all").click(function () { 
        if ($("#all").is(':checked')) {
            $(".checkboxclass").each(function () {
                $(this).prop("checked", true);
            }); 
        } else {
            $(".checkboxclass").each(function () {
                $(this).prop("checked", false);
            });
        }
    }); 
});     

HTML：

<table class="tg" id="result" style="width: 100%">
    <thead>
        <tr>
            <th class="tg" style="text-align: center"><input type="checkbox" id="all" 
                onclick="toggle(this);" /></th>
        </tr> 
    </thead>
    <tbody>
        <tr th:each="map : ${listID}">
            <td class="tg bg" align="center"><input type="checkbox" class="checkboxclass" name="check"
                th:id="${map['ID']}" th:value="${map['ID']}" /></td>
        </tr>       
    </tbody>
</table>

選中一個復選框將選擇全部但僅限於當前頁面。 它不適用於其他頁面的分頁

誰能幫助解決這個問題。 謝謝。

Answer 1

很可能，您有重復的ID; 如果您有多個具有相同ID的元素，例如id="all" ，則會產生無效的HTML，並且您無法預測不同的瀏覽器如何處理它。 大多數人通常選擇第一個，並忽略其余的元素。

請更換：

 <input type="checkbox" id="all" onclick="toggle(this);" />

至：

<input type="checkbox" class="all" ....

這樣你的代碼就是：

$(".all").on('change', function () {
    $(this).closest('table').find('.checkboxclass').prop('checked', this.checked ); 
}); 

UPDATE

謝謝你澄清; 我將保留上述內容，以便您澄清這些內容的評論可能仍然有用

您可以通過以下方式解決該問題：

    $(function(){
        var table = $("#result").dataTable({ 
            "scrollX" : true, 
                "ordering" : true,
                "order": [[ 1, "asc" ]],
                "info" : true, 
                });
        });  
        $("#all").on('click', function () { 
            var cells = table.api().cells().nodes();
            $( cells ).find('.checkboxclass').prop('checked', this.checked);
        });
    });
    //source: https://www.datatables.net/forums/discussion/22728/datatables-1-10-select-all-checkbox-and-hidden-rows-pages

請注意 $(document).ready(function() { .... }); 和$(function() { .... }); 是不同的寫同樣的方式 - 不需要嵌套它們。

Answer 2

這對我有用。

if ($("#all").is(':checked')) { 
  $(".checkboxclass", table.fnGetNodes()).each(function () { 
  $(this).prop("checked", true);
  });     
else {
  $(".checkboxclass", table.fnGetNodes()).each(function () {
  $(this).prop("checked", false); 
  })
  }

Answer 3

您已在單擊切換功能上聲明但未使用它。 請找到有助於解決您的問題的代碼段。

<table class="tg" id="result" style="width: 100%">
    <thead>
        <tr>
            <th class="tg" style="text-align: center">
                <input type="checkbox" id="all" />
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="tg bg" align="center"><input type="checkbox" class="checkboxclass" name="check" /></td>
            <td class="tg bg" align="center"><input type="checkbox" class="checkboxclass" name="check" /></td>
            <td class="tg bg" align="center"><input type="checkbox" class="checkboxclass" name="check" /></td>
            <td class="tg bg" align="center"><input type="checkbox" class="checkboxclass" name="check" /></td>
        </tr>
    </tbody>
</table>

 $("#all").click(function () {
    if (this.checked) {
        $('.checkboxclass').each(function () {
            this.checked = true;
        })
    }
    else {
        $('.checkboxclass').each(function () {
            this.checked = false;
        })
    }
})