修订后的标题：根据复选框选择计算总计-PHP中文网问答

我正在开发一个简单的财务跟踪应用程序。在应用程序中，有一个包含所有支出账单的表格，然后是位于表格外部的总金额。

我正在尝试找到一种使用 JS 或 AJAX 的方法，以便当我选择表行中的 1 个复选框时，我可以在总计中包含/排除账单，并自动更新总计以反映排除/包含。

表行是动态创建的，因此每次添加新帐单时，行都会增加，这意味着复选框 ID 需要增加。


  
      {% for item in debts %}
      
      {% endfor %}
    
    
      
        #
        CREDITOR
        DESCRIPTION
        CATEGORY
        AMOUNT
        INCLUDE / EXCLUDE
      
    
    
        {{ forloop.counter }}
        {{ item.creditor }}
        {{ item.description }}
        {{ item.category }}
        £{{ item.amount }}

#	CREDITOR	DESCRIPTION	CATEGORY	AMOUNT	INCLUDE / EXCLUDE
{{ forloop.counter }}	{{ item.creditor }}	{{ item.description }}	{{ item.category }}	£{{ item.amount }}

我有一点 JS

const checkbox = document.getElementById('myCheckbox')

checkbox.addEventListener('change', (event) => {
  if (event.currentTarget.checked) {
    alert('checked');
  } else {
    alert('not checked');
  }
})

当选中复选框时，这确实会触发警报，但这只会在第一个复选框上触发，因为这是具有相同 ID 的复选框。

所以这可能是一个棘手的任务，因为我需要复选框 JS 来知道选中复选框的行的金额是多少，然后从总数中减去该数字，反之亦然。也许这是错误的方法？

总数显示为：

£{{total_monthly_outgoing|floatformat:2}} per month

谢谢

const totalContainer = document.querySelector("h3.text-danger span"); document.querySelector(".card-body").addEventListener("click", (e) => { if (!e.target.matches(".table-checkbox")) return; // not a checkbox const total = [...document.querySelectorAll(".table-checkbox:checked")] .map(chk => +chk.closest("td").previousElementSibling.textContent.slice(1)) // remove the pound .reduce((a,b)=> a+b); // sum totalContainer.textContent = `£${total.toFixed(2)}`; })

#	CREDITOR	DESCRIPTION	CATEGORY	AMOUNT
1	creditor 1	description 1	category 1	£123
2	creditor 2	description 2	category 2	£223
3	creditor 3	description 3	category 3	£323

£{{total_monthly_outgoing|floatformat:2}} per month

£0 per month