You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

复选框取消选中后仍保留选中值并参与计算的问题求助

复选框取消选中后仍保留选中值并参与计算的问题求助

各位大佬好,我现在做一个复选框选项目算总价的功能,遇到了几个奇怪的问题,想请教下怎么解决:

  1. 操作步骤和异常现象:
  • 我先勾选前两个复选框,点击计算按钮,结果能正常显示这两个选项的内容和对应总价
  • 接着我取消第二个复选框的勾选,再次点击计算按钮,结果却依然显示两个选项的内容和之前的总价,完全没把取消勾选的项目去掉
  • 另外,当我点击清除按钮后,重新勾选复选框计算,会出现价格显示为"0"的异常情况

演示图说明:界面包含多个带价格的复选框、计算按钮、清除按钮以及结果展示区,图中显示了取消复选框后计算结果未更新的状态

下面是我目前写的代码(部分内容没写完,核心逻辑如下):

const calcButton = document.getElementById('calc-button');
const clearButton = document.getElementById('clear-button');
const result = document.getElementById('result');

let currentValue = 0;
let totalPrice = 0;
let exams = [];

function getCheckboxValue(event) {
  const checkboxValue = event.target.value;
  if (event.target.checked) {
    currentValue += parseInt(checkboxValue);
    exams.push(event.target.nextElementSibling.textContent);
  } else {
    // 这里我暂时不知道该怎么写取消选中的处理逻辑
  }
}

calcButton.addEventListener('click', () => {
  totalPrice = currentValue;
  result.innerHTML = `选中的项目:${exams.join(', ')},总价:${totalPrice}`;
});

clearButton.addEventListener('click', () => {
  result.innerHTML = '';
});

我感觉问题出在取消复选框选中时没有从总和和数组里移除对应的值,还有清除按钮也没把变量都重置,但试了几种写法都不对,有没有大佬能帮我调整下代码,解决这些异常问题呀?

备注:内容来源于stack exchange,提问作者Ana Carolina

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.16 09:09:53