javascript - 使用数据表时，取消选中所有复选框不适用于所有页面

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 ); 
}); 

更新

感谢您的澄清；我将保留以上内容，以便您在已澄清的地方发表的评论可能仍然相关

以下是解决该问题的方法:

    $(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() { .. .. }); 是编写同一事物的不同方式——无需嵌套它们。