如何用JavaScript实现取消某复选框时自动取消后续复选框？

需求说明 #

现有一组复选框，勾选时累加价格，需实现以下逻辑：

• 勾选某复选框时，自动勾选其所有前置复选框，价格累加对应值（如勾选checkbox3，自动勾选checkbox1、2，价格从100→160）
• 取消某复选框时，自动取消其所有后置复选框，价格同步减少（如取消checkbox2，自动取消checkbox3，价格从140→120）
• 对应文本（txtP3-txtP7）仅显示最后一个勾选的复选框对应的内容，其余隐藏

优化后的实现代码 #

HTML部分 #

添加价格显示元素，保留原有复选框和文本结构：

<p>当前价格：<span id="totalPrice">100</span></p>

<label><input type="checkbox" value="20" class="tarifsuppl" id="P3"><span></span></label>
<label><input type="checkbox" value="20" class="tarifsuppl" id="P4"><span></span></label>
<label><input type="checkbox" value="20" class="tarifsuppl" id="P5"><span></span></label>
<label><input type="checkbox" value="20" class="tarifsuppl" id="P6"><span></span></label>
<label><input type="checkbox" value="20" class="tarifsuppl" id="P7"><span></span></label>

<p id="txtP3">OK 3</p>
<p id="txtP4">OK 4</p>
<p id="txtP5">OK 5</p>
<p id="txtP6">OK 6</p>
<p id="txtP7">OK 7</p>

JavaScript部分 #

重构逻辑，避免硬编码，提升扩展性：

// 初始化元素和基础价格
const checkboxes = Array.from(document.querySelectorAll('.tarifsuppl'));
const textElements = checkboxes.map(box => document.getElementById(`txt${box.id}`));
const totalPriceEl = document.getElementById('totalPrice');
const basePrice = 100;

// 绑定复选框事件
checkboxes.forEach((box, index) => {
  box.addEventListener('change', () => handleCheckboxChange(index));
});

function handleCheckboxChange(changedIndex) {
  const isChecked = checkboxes[changedIndex].checked;

  // 处理勾选逻辑：勾选时同步勾选所有前置复选框
  if (isChecked) {
    for (let i = 0; i <= changedIndex; i++) {
      checkboxes[i].checked = true;
    }
  } 
  // 处理取消逻辑：取消时同步取消所有后置复选框
  else {
    for (let i = changedIndex; i < checkboxes.length; i++) {
      checkboxes[i].checked = false;
    }
  }

  // 更新文本显示：仅显示最后一个勾选的复选框对应文本
  textElements.forEach(el => el.style.display = 'none');
  const lastCheckedIndex = checkboxes.lastIndexOf(checkboxes.find(box => box.checked));
  if (lastCheckedIndex !== -1) {
    textElements[lastCheckedIndex].style.display = 'block';
  }

  // 计算并更新总价
  calculateTotalPrice();
}

function calculateTotalPrice() {
  const selectedSum = checkboxes
    .filter(box => box.checked)
    .reduce((sum, box) => sum + parseInt(box.value), 0);
  totalPriceEl.textContent = basePrice + selectedSum;
}

代码说明 #

1. 元素批量处理：通过类选择器一次性获取所有复选框和对应文本元素，避免逐个getElementById的冗余代码
2. 事件统一绑定：给每个复选框绑定change事件，触发联动逻辑
3. 联动逻辑实现：
   • 勾选时，遍历当前复选框之前的所有元素，设置为勾选状态
   • 取消时，遍历当前复选框之后的所有元素，设置为取消状态
4. 文本显示控制：找到最后一个勾选的复选框，仅显示其对应文本，其余隐藏
5. 动态价格计算：过滤所有勾选的复选框，累加其值后加上基础价格，实时更新显示

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