如何获取分页数据表格中所有已勾选复选框的值？

javascript

2024-03-07 14:32:01

## 分页数据表格：获取所有已勾选复选框

问题：

在多页数据表格中使用分页时，如何获取所有已勾选的复选框的值，包括不同页面上的复选框？

解决方案：

1. 添加点击事件处理程序：

为每个复选框添加一个点击事件处理程序，当复选框被选中或取消选中时，更新数据表格中的相应数据行。

2. 获取已勾选的行：

使用 DataTables API 遍历所有行，检查每个行的复选框是否选中，并提取已勾选行的值。

代码示例：

<!-- HTML表结构 -->
<table id="example" class="display" style="width:100%">
    ...
    <!-- 带有复选框的每一行 -->
    <tr>
        <td><input type="checkbox" name="employeeID" class="select-employee" value="1"></td>
        ...
    </tr>
    ...
</table>

<!-- JavaScript事件处理程序 -->
<script>
$(document).ready(function() {
    var table = $('#example').DataTable();

    $('#example').on( 'click', '.select-employee', function () {
        var checked = $(this).prop('checked');
        var row = $( this ).closest( 'tr' );
        var data = table.row ( row ).data();

        if ( checked ) {
            data.check = 1;
        } else {
            data.check = 0;
        }
    });

    $('#get-values').on('click', function () {
        var checkedRows = [];
        table.rows().every( function(rowIdx, tableLoop, rowLoop ) {
            var data = this.data();

            if (data.check === 1) {
                checkedRows.push(data);
            }
        });
        console.log('Checked rows via API');
        console.log(checkedRows);
        $('#selected').html(checkedRows);
    });
});
</script>