Question

我有一个HTML，JavaScript表单，它根据表单中的选项计算价格。问题是只有在点击一个复选框后才会计算总价。我希望它能够立即计算价格而无需先选中复选框。以下是JavaScript代码的片段：

function totalIt() {
  var input = document.getElementsByName("product");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
        total += parseFloat(input[i].value); // this function should run immediately
    }
  }
  document.getElementById("total").value = "€" + total.toFixed(2);
}

可以找到完整表格here。

如何做到这一点？

Answer 1

加载页面后调用totalIt();。

<!-- Rekenscript om het totaal van het formulier te genereren -->
function totalIt() {
    var input = document.getElementsByName("product");
    var total = 0;
    for (var i = 0; i < input.length; i++) {
        if (input[i].checked) {
            total += parseFloat(input[i].value);
        }
    }
    document.getElementById("total").value = "€" + total.toFixed(2);
}

<!-- Checkbox switch om maandelijkse kosten aan of uit te doen -->
function showMe (box) {

    var chboxs = document.getElementsByName("c1");
    var vis = "none";
    for(var i=0;i<chboxs.length;i++) {
        if(chboxs[i].checked){
            vis = "block";
            break;
        }
    }
    document.getElementById(box).style.display = vis;
}

<!-- Switch om ander thema te kiezen (met a href) -->
function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "Een ander thema kiezen";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Huidige thema behouden";
    }
}

totalIt(); // call it here

Answer 2

我找到了一个很好的解决方案。我没有意识到它是非常愚蠢的，但遗憾的是我并不擅长JavaScript。

我使用totalIt();作为 @Durga 建议。我在它周围添加了这个脚本，所以它会每隔10ms调用一次计算函数：

window.setInterval(function(){
  totalIt();
}, 10);

放置脚本的位置并不重要，只要您不将其放在表单代码中或替换任何代码即可。当然，您可以将10毫秒更改为您需要的任何内容。谢谢大家的答案。

无需选中复选框即可立即计算表格总数

2 个答案: