如何在Django中获取选中复选框对应<tr>的全部信息或ID字段

你用的是Bootstrap Table，有几种简单方法能拿到选中行的ID甚至整行数据，下面给你具体方案：

方法1：复用现有后端逻辑，修改复选框值为行ID #

直接让每个复选框的value对应所在行的ID，这样后端不用改代码就能拿到选中的ID列表。

前端修改表格配置： #

$(function() {
    var data = {{data|safe}}
    $table.bootstrapTable({
        data: data,
        columns: [
            {
                field: 'checkbox',
                checkbox: true,
                // 自定义复选框渲染，把value设为当前行的ID
                formatter: function(value, row, index) {
                    return '<input name="btSelectItem" type="checkbox" value="' + row.id + '">';
                }
            },
            {field: 'id', title: 'ID'},
            {field: 'email', title: 'Email'},
            {field: 'source', title: 'Source'},
            {field: 'created_at', title: 'Created at'},
            {field: 'modified_at', title: 'Modified at'}
        ]
    })
})

后端直接用你原来的代码： #

if request.method == 'POST':
    selected_ids = request.POST.getlist('btSelectItem')

这个方案最省事，完全复用你现有的后端逻辑，只改前端配置。

方法2：用Bootstrap Table API获取完整选中行数据 #

如果需要拿到整行的所有信息，可以用框架自带的API获取选中行，再通过隐藏字段提交给后端。

前端修改： #

1. 在form里加一个隐藏字段：

<input type="hidden" name="selected_rows" id="selected_rows">

2. 监听表单提交事件，把选中行转成JSON存到隐藏字段：

$('form').on('submit', function() {
    // 获取所有选中行的完整数据
    var selectedRows = $('#table').bootstrapTable('getSelections');
    // 转成JSON字符串存入隐藏字段
    $('#selected_rows').val(JSON.stringify(selectedRows));
    return true; // 允许表单提交
});

后端解析数据： #

import json
if request.method == 'POST':
    selected_data_str = request.POST.get('selected_rows', '')
    selected_data = json.loads(selected_data_str) if selected_data_str else []
    # 现在selected_data里就是所有选中行的完整数据

方法3：DOM遍历获取选中行信息（不用API） #

如果不想依赖框架API，也可以直接操作DOM拿到数据：

$('form').on('submit', function() {
    var selectedIds = [];
    // 遍历所有选中的复选框
    $('#table input[name="btSelectItem"]:checked').each(function() {
        // 找到复选框所在的行
        var row = $(this).closest('tr');
        // 提取ID列的内容（根据data-field定位）
        var id = row.find('td[data-field="id"]').text();
        selectedIds.push(id);
    });
    // 存入隐藏字段提交
    $('#selected_ids').val(selectedIds.join(','));
    return true;
});

这种方法兼容性强，但不如API简洁，适合特殊场景使用。

内容的提问来源于stack exchange，提问作者Ivan Mishakivskiy