在jQuery Datatables中实现选中复选框同步修改同行金额值的方法

你需要修改全选按钮的点击事件和行内复选框的change事件，同时补充全选按钮的完整状态判断逻辑，具体修改如下：

1. 修改全选按钮的点击事件 #

在批量设置复选框状态后，同步处理所有行的实付金额：

• 遍历搜索结果内的所有行
• 根据全选框的勾选状态，将实付金额设为对应账单金额，或清空实付金额

2. 完善行内复选框的change事件 #

• 新增当前行的金额处理逻辑：勾选时填充账单金额到实付金额，取消勾选时清空
• 补充全选按钮的状态判断：所有行复选框都勾选时，全选按钮设为勾选；部分勾选时设为中间状态；全不选时设为未勾选

修改后的完整代码 #

// Handle click on "Select all" control
$('#pharmacyTable-select-all').on('click', function () {
    var isChecked = this.checked;
    // Check/uncheck all checkboxes in the table
    var rows = pharmacyTable.rows({ 'search': 'applied' }).nodes();
    $('input[type="checkbox"]', rows).prop('checked', isChecked);
    
    // 批量处理实付金额
    rows.each(function(row) {
        var billAmount = $(row).find('td:eq(1)').text(); // 替换为你的账单金额列索引（从0开始）
        var paidAmountCell = $(row).find('td:eq(2)'); // 替换为你的实付金额列索引（从0开始）
        
        if (isChecked) {
            paidAmountCell.text(billAmount);
            // 若实付金额是可编辑输入框，替换为：paidAmountCell.find('input').val(billAmount);
        } else {
            paidAmountCell.text('');
            // 若实付金额是可编辑输入框，替换为：paidAmountCell.find('input').val('');
        }
    });
});

// Handle click on checkbox to set state of "Select all" control
$('#pharmacyTable tbody').on('change', 'input[type="checkbox"]', function () {
    var $row = $(this).closest('tr');
    var isChecked = this.checked;
    
    // 处理当前行的实付金额
    var billAmount = $row.find('td:eq(1)').text(); // 替换为你的账单金额列索引
    var paidAmountCell = $row.find('td:eq(2)'); // 替换为你的实付金额列索引
    
    if (isChecked) {
        paidAmountCell.text(billAmount);
        // 若实付金额是可编辑输入框，替换为：paidAmountCell.find('input').val(billAmount);
    } else {
        paidAmountCell.text('');
        // 若实付金额是可编辑输入框，替换为：paidAmountCell.find('input').val('');
    }

    // 更新全选按钮的状态
    var totalRows = pharmacyTable.rows({ 'search': 'applied' }).count();
    var checkedRows = $('#pharmacyTable tbody input[type="checkbox"]:checked').length;
    var $selectAll = $('#pharmacyTable-select-all').get(0);

    if (checkedRows === totalRows) {
        $selectAll.checked = true;
        $selectAll.indeterminate = false;
    } else if (checkedRows === 0) {
        $selectAll.checked = false;
        $selectAll.indeterminate = false;
    } else {
        $selectAll.indeterminate = true;
    }
});

注意事项 #

• 请根据你的表格实际列结构，调整代码中td:eq(1)和td:eq(2)的索引值（索引从0开始计数）
• 如果实付金额单元格是可编辑输入框，请注释掉text()相关代码，启用对应输入框操作的代码

内容的提问来源于stack exchange，提问作者BTI-Doug