在没有输入字段的新复选框中刷新javascript计算总和

<form id="myForm">
  <input type="checkbox" id="checkbox1" value="10"> Option 1
  <input type="checkbox" id="checkbox2" value="20"> Option 2
  <input type="checkbox" id="checkbox3" value="30"> Option 3
</form>

function calculateTotal() {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  var total = 0;

  checkboxes.forEach(function(checkbox) {
    if (checkbox.checked) {
      total += parseInt(checkbox.value);
    }
  });

  document.getElementById('total').innerHTML = 'Total: ' + total;
}

// 监听复选框的点击事件
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(function(checkbox) {
  checkbox.addEventListener('click', calculateTotal);
});

<div id="total"></div>