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() { .... });是编写相同内容的不同方式 - 无需嵌套它们。

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

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

3 个答案: