JSP页面无法为产品分配id时如何用JavaScript计算账单总费用

你无需为单个产品分配独立ID，通过自定义属性绑定产品价格+遍历选中复选框的方式即可实现计算逻辑，操作步骤如下：

步骤1：修改JSP复选框代码 #

在渲染产品行的复选框时，新增data-price自定义属性存储当前产品的价格，修改后代码如下：

<td><input type="checkbox" name="addProduct" data-price="<%=product.getPrice()%>"></td>

另外你现有代码里的计算按钮排版存在语法问题，建议修正为如下格式避免布局错乱：

<tr>
  <td colspan="5">
    <input type="button" value="calculate" onclick="calculate()"> 计算总金额
  </td>
</tr>

步骤2：编写JavaScript计算函数 #

直接通过name属性匹配所有产品复选框，遍历取值累加即可，代码如下：

function calculate() {
  // 初始化选中产品总价
  let totalProductPrice = 0;
  // 获取所有产品复选框
  const productChecks = document.querySelectorAll('input[name="addProduct"]');
  // 遍历复选框，累加选中产品的价格
  productChecks.forEach(check => {
    if (check.checked) {
      // 读取自定义属性里的价格，转成数字后累加
      totalProductPrice += Number(check.dataset.price);
    }
  });
  // 获取运费，无输入时默认0
  const shippingCost = Number(document.getElementById('shippingCost').value || 0);
  // 计算总订单金额
  const totalOrderValue = totalProductPrice + shippingCost;
  // 赋值到总金额输入框
  document.getElementById('totalOrderValue').value = totalOrderValue;
}

内容的提问来源于stack exchange，提问作者Prerna Sharma