JavaScript实现复选框勾选累加、取消扣减（id为PHP变量）

需实现PHP输出金额列表的复选框联动总计逻辑：

• 复选框勾选时，对应金额累加到总计值
• 复选框取消勾选时，对应金额从总计值中扣减
  现有代码异常表现：无论复选框勾选/取消，都会执行加值操作，扣减逻辑不生效。

原有JS逻辑存在两处核心缺陷：

• 点击事件触发后未判断复选框当前选中状态，无条件执行金额累加
• 变量未做局部声明，数值转换未处理空格、空值场景，易引发计算异常

<html>
<body>
<?php
 $testArray = [100000,200000,300000,144444,154444,16444,174444,18444];  
?>
<div>
<?php for($i=0;$i<count($testArray);$i++) { ?>
<!-- 点击事件新增传入当前复选框DOM对象this -->
<input type="checkbox"  id = <?php echo $i ?> onclick="myFunction(this, <?php echo $testArray[$i] ?>)" value="<?php echo $testArray[$i] ?>" ><?php echo $testArray[$i] ?> <br/>
<?php } ?>
</div>
<table>
<tr style = "display: none;" >
    <td></td>
    <td id = 'balance'> 0 </td> 
</tr>
<tr>
    <td> Total  :  </td>
    <td id = 'balance1'> 0 </td>
</tr>
</table>
<script>
function myFunction(checkbox, x){
  // 读取存储的原始总计值，做去空格、空值兜底处理
  let balance = parseInt(document.getElementById('balance').textContent.trim()) || 0;
  let total;
  // 根据复选框状态判断是加值还是减值
  if(checkbox.checked) {
    total = balance + x;
  } else {
    total = balance - x;
  }
  // 更新原始总计存储值
  document.getElementById('balance').textContent = total;
  // 千分位格式化后展示
  document.getElementById('balance1').textContent = total.toLocaleString("en-US");
}
</script>
</body>
</html>

• 复选框onclick事件新增传入this参数，直接获取当前触发事件的复选框DOM对象，通过checked属性读取选中状态
• 新增分支判断逻辑：选中状态执行金额累加，未选中状态执行金额扣减
• 增加数值转换兜底逻辑，读取存储值时先去除前后空格，转换失败时默认按0计算，避免出现NaN异常
• 所有变量用let声明为局部变量，避免全局变量污染引发的计算错误

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