如何实现两组复选框累加值的求和及同步更新？

问题背景 #

需要实现productAmount.value与localAmount.value的实时求和，这两个数值分别由两组复选框的选中状态计算得出。当前代码只能单独显示其中一个数值，无法同步更新两者的总和。

原有核心代码片段：

// 产品复选框事件末尾
resultSum.value = number_format(parseInt(productAmount.value));

// 本地服务复选框事件末尾
resultSum.value = number_format(parseInt(localAmount.value));

尝试过的单次求和代码：

resultSum.value = parseInt(productAmount.value) + parseInt(localAmount.value);

仅能单次生效，无法随复选框状态变化实时更新总和。

最优解决方案 #

核心思路是抽离统一的总和计算与更新函数，让两组复选框的点击事件在完成自身数值计算后，都调用该函数更新总和，既保留原有累加逻辑，又实现实时同步。

修改后的完整代码 #

// 定义统一的总和更新函数
function updateTotalSum() {
  // 用 || 0 处理空值/非数字情况，避免出现NaN
  const productVal = parseInt(productAmount.value) || 0;
  const localVal = parseInt(localAmount.value) || 0;
  resultSum.value = number_format(productVal + localVal);
}

// 产品复选框点击事件
for (let i = 0; i < productChcbx.length; i++) {
    productChcbx[i].addEventListener("click", () => {
        let sum = 0;
        let cnt = 0;
        for (let j = 0; j < productChcbx.length; j++) {
            if (productChcbx[j].checked) {
                cnt++;
                if (cnt == 1) {
                    addProduct.style.display = "flex";
                    productAmount.innerHTML = "70,000원";
                    productAmount.value = 70000;
                } else if (cnt > 1) {
                    sum = 70000 + 60000 * (cnt - 1);
                    productAmount.innerHTML = number_format(sum) + "원";
                    productAmount.value = sum;
                }
            } else if (!productChcbx[j].checked) {
                if (cnt == 0) {
                    addProduct.style.display = "none";
                    productAmount.value = 0;
                }
            }
        }
        // 替换原有单独赋值，调用总和更新函数
        updateTotalSum();
    })
}

// 本地服务复选框点击事件
for (let k = 0; k < localCheckboxs.length; k++) {
    localCheckboxs[k].addEventListener("click", () => {
        let sum = 0;
        let cnt = 0;
        for (let h = 0; h < localCheckboxs.length; h++) {
            if (localCheckboxs[h].checked) {
                cnt++;
                if (cnt == 1) {
                    addLocal.style.display = "flex";
                    localAmount.innerHTML = "150,000원";
                    localAmount.value = 150000;
                } else if (cnt > 1) {
                    sum = 150000 + 100000 * (cnt - 1);
                    localAmount.innerHTML = number_format(sum) + "원";
                    localAmount.value = sum;
                }
            } else if (!localCheckboxs[h].checked) {
                if (cnt == 0) {
                    addLocal.style.display = "none";
                    localAmount.value = 0;
                }
            }
        }
        // 替换原有单独赋值，调用总和更新函数
        updateTotalSum();
    })
}

逻辑说明 #

1. updateTotalSum函数负责统一计算两个数值的总和，处理异常值后格式化输出，确保结果始终有效
2. 两组复选框的点击事件在完成自身的数值计算与DOM更新后，调用该函数触发总和更新
3. 完全保留原有业务逻辑：产品复选框的70000 + 60000*(n-1)、本地服务复选框的150000 + 100000*(n-1)累加规则

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