点击Try It按钮触发页面重载，checkbox状态丢失及total结果无法保留求助

你遇到的核心问题是按钮触发了表单默认提交行为——如果你的Total按钮放在<form>标签内部，浏览器会默认把它识别为表单提交按钮，点击后自动提交表单并刷新页面，导致之前勾选的复选框状态丢失、计算结果一闪而过。

下面是几种直接有效的解决方法：

• 修改按钮类型
  给按钮添加type="button"属性，明确告诉浏览器这不是提交按钮：

  <button type="button" id="totalBtn">Total</button>
  

• 阻止默认事件（JS方式）
  如果需要保留按钮的默认类型，在点击事件里阻止表单提交的默认行为：

  // 原生JS写法
  document.getElementById('totalBtn').addEventListener('click', function(e) {
    e.preventDefault(); // 阻止页面刷新
    // 执行你的计算逻辑
  });
  

• 移除不必要的form标签
  如果你的页面不需要向后端提交表单数据，直接删掉包裹元素的<form>标签，按钮点击就不会触发页面重载了。

做完以上任意一种修改后，勾选复选框再点击Total按钮，计算结果会正常保留，页面也不会重置了。

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