如何使用纯JavaScript实现点击新下拉选项后重置checkbox勾选值

开发者阿泽

2026-10-5

核心问题分析

原有totalIt函数全局匹配所有name=product的复选框，统计逻辑没有和当前展示的门店绑定，且只会更新第一个name=total的输入框，不同门店的勾选状态会互相干扰
下拉切换时没有对目标门店的复选框、合计值做重置处理

修正方案

你的HTML、CSS代码无需调整，直接替换为如下JS代码即可：

document.querySelector("select#store").addEventListener("change", () => {
  display(event.target.value);
});

const boxs = document.querySelectorAll("div.box");
 
// 下拉切换展示逻辑
function display(value) {
  for (const box of boxs) {
    if (box.classList.contains(value)) {
      box.classList.remove("hide");
      // 切换到当前门店时重置复选框和合计值
      const checkboxes = box.querySelectorAll('input[name="product"]');
      checkboxes.forEach(item => item.checked = false);
      box.querySelector('input[name="total"]').value = "0%";
    } else {
      box.classList.add("hide");
    }
  }
  // 切换后刷新当前门店合计值
  totalIt();
}
display("A");
   
// 复选框合计逻辑
function totalIt() {
  // 仅匹配当前处于展示状态的门店盒子
  const activeBox = document.querySelector("div.box:not(.hide)");
  const input = activeBox.querySelectorAll('input[name="product"]');
  const totalInput = activeBox.querySelector('input[name="total"]');
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }
  totalInput.value = total + "%";
}