当在同一行中选中复选框时，JQuery 数据表设置不同的列值

Question

我在我的应用程序中使用最新的.Net core 和数据表。我在 javascript 中设置了触发器，用于向表的第 1 列 (0) 添加复选框，并且我还在列标题上运行“全选”功能，并在标题上显示中间状态。这一切都很好。

数据为药房列表、账单金额和实际支付金额。我想单击药房的复选框，然后自动将账单金额单元格的全额填写到支付金额单元格中。相反，如果没有勾选药房，则将已支付的金额清空。

cb	药房	已计费	付费
X	医药1	100	100
	医药2	200	0
	医药3	300	0
X	医药4	400	400

复选框的代码直接来自数据表网站，如下：

    // Handle click on "Select all" control
    $('#pharmacyTable-select-all').on('click', function () {
            // Check/uncheck all checkboxes in the table
            var rows = pharmacyTable.rows({ 'search': 'applied' }).nodes();
            $('input[type="checkbox"]', rows).prop('checked', this.checked);
        });

    // Handle click on checkbox to set state of "Select all" control
    $('#pharmacyTable tbody').on('change', 'input[type="checkbox"]', function () {
            // If checkbox is not checked
            if (!this.checked) {
                var el = $('#pharmacyTable-select-all').get(0);
                // If "Select all" control is checked and has 'indeterminate' property
                if (el && el.checked && ('indeterminate' in el)) {
                    // Set visual state of "Select all" control
                    // as 'indeterminate'
                    el.indeterminate = true;
                }
            }
        });

此功能需要更改什么？

Answer 1

如果您不使用数据表模板和服务器端加载，而只是将其应用于预构建的表，则可以为复选框、“已计费”源和“已付费”目的地的标记中的行添加唯一标识符，以便您可以（使用数据属性 data-row-id=XXX）：

1. 将更改事件关联到 document.ready 中表格中的所有复选框
2. 在更改事件的事件处理程序中，读取 data-row-id 值
3. 找到付费源var amount = $("span[data-row-id=XXX]).text()
4. 分配给付费输入 $("input[data-row-id=XXX]).val(amount);