使用JavaScript通过复选框增减数值的教程

const s = document.querySelectorAll('#enroll-subject'); // 假设这里能正确获取所有复选框
const cue = document.getElementById('cu');
let cu = parseInt(cue.textContent.replace('Current Units: ', '').trim());

s.forEach(cb => {
  cb.addEventListener('change', updateTotalUnits);
});

function updateTotalUnits() {
  let totalUnits = cu; // 每次都从初始的cu值开始
  s.forEach(cb => {
    if (cb.checked) {
      console.log("checked");
      totalUnits += parseInt(cb.value);
    } else {
      console.log("not checked");
      totalUnits -= parseInt(cb.value); // 问题所在：未勾选的项被减去，即使它们之前从未被加过
    }
  });
  cue.innerHTML = `Current Units: ${totalUnits}`;
}

<span style="padding: 1em;" id="cu">Current Units: 15</span>
<!-- ... 其他HTML ... -->
<table>
  <tbody>
    <tr>
      <td>Checkbox 1</td>
      <td><input class="sbj-checkbox" type="checkbox" name="enroll-subject" value="4" id="enroll-subject"></td>
    </tr>
    <!-- ... 其他复选框，都使用了相同的 id="enroll-subject" ... -->
  </tbody>
</table>

<div class="irreg-container" style="display:flex; flex-direction:column; text-align: center;">
  <div class="header" style="display:flex; flex-direction:column;">
    <span style="padding: 1em;" id="cu">Current Units: 15</span>
    <span style="padding: .7em;font-size:1.3em;">Checkboxes</span>
  </div>
  <div class="subjects" style="display:flex; flex-direction: column;">
    <table>
      <tbody>
        <tr>
          <td style="width: 100%;">Checkbox 1</td>
          <td style="width: 100%;">
            <input class="sbj-checkbox" type="checkbox" name="enroll-subject" value="4" id="checkbox1">
          </td>
        </tr>
        <tr>
          <td style="width: 100%;">Checkbox 2</td>
          <td style="width: 100%;">
            <input class="sbj-checkbox" type="checkbox" name="enroll-subject" value="4" id="checkbox2">
          </td>
        </tr>
        <tr>
          <td style="width: 100%;">Checkbox 3</td>
          <td style="width: 100%;">
            <input class="sbj-checkbox" type="checkbox" name="enroll-subject" value="4" id="checkbox3">
          </td>
        </tr>
        <tr>
          <td style="width: 100%;">Checkbox 4</td>
          <td style="width: 100%;">
            <input class="sbj-checkbox" type="checkbox" name="enroll-subject" value="4" id="checkbox4">
          </td>
        </tr>
      </tbody>
    </table>
    <div class="button-container" style="text-align: center;">
      <button class="submit"> Submit </button>
    </div>
  </div>
</div>

// 1. 获取所有复选框和显示总数的元素
const subjectCheckboxes = document.querySelectorAll('.sbj-checkbox'); // 使用类名选择
const currentUnitsDisplay = document.getElementById('cu');

// 2. 初始化当前总单位数
// 从DOM中解析初始值，并确保它是整数
let currentTotalUnits = parseInt(currentUnitsDisplay.textContent.replace('Current Units: ', '').trim());

// 3. 为每个复选框添加事件监听器
subjectCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', handleCheckboxChange);
});

// 4. 定义事件处理函数
function handleCheckboxChange() {
  // `this` 指向触发事件的当前复选框
  const checkboxValue = parseInt(this.value); // 获取复选框的值并转换为整数

  if (this.checked) {
    // 如果复选框被勾选，则增加总单位数
    console.log("Checkbox checked, adding:", checkboxValue);
    currentTotalUnits += checkboxValue;
  } else {
    // 如果复选框被取消勾选，则减少总单位数
    console.log("Checkbox unchecked, subtracting:", checkboxValue);
    currentTotalUnits -= checkboxValue;
  }

  // 5. 更新页面上显示的总单位数
  currentUnitsDisplay.innerHTML = `Current Units: ${currentTotalUnits}`;
}