我如何使用Javascript来保持选中的复选框总数并显示它

How can I use Javascript to keep the total of checkboxes selected and display it?

本文关键字：复选框 显示 何使用 Javascript      更新时间：2023-09-26

这段代码不起作用，我不知道为什么。

<html><body>
<form>
<input type="checkbox" name="a" onclick="updateTotal('a',5)">5<br>
<input type="checkbox" name="b" onclick="updateTotal('b',3)">4<br>
<input type="checkbox" name="c" onclick="updateTotal('c',4)">3<br>
TOTAL: &pound;
<script type="text/javascript">
    var total = 0;
    function updateTotal(row, val){
            global total;
            if (document.getElementByID(row_no).checked){
                total += price;
            }
            else {
                total -= price;
            }
            document.write(+total);
        }
    }
</script>
</body>
</html>

我怎样才能让它按我想要的方式工作？谢谢你的帮助。

它充满了JS错误。。。您可以在此处查看：http://www.jslint.com/

如果你想让它发挥作用，你可以试试这样的东西：

var total = 0;
updateTotal = function (row, val){
    if (document.getElementById(row).checked){
        total += val;
    }
    else {
        total -= val;
    }
    document.getElementById("total").innerHTML ="TOTAL: "+ total +"&pound;";
}
<form>
    <input type="checkbox" id="a" onclick="updateTotal('a',5)">5<br>
    <input type="checkbox" id="b" onclick="updateTotal('b',3)">4<br>
    <input type="checkbox" id="c" onclick="updateTotal('c',4)">3<br>
    <span id="total">TOTAL: &pound;</span>
</form>

检查这个小提琴

var total = 0;
function updateTotal(row, val){
    if (document.getElementById(row).checked){
        total += val;
    }
    else {
        total -= val;
    }
    document.getElementById('total').innerHTML = total;
}

您的示例中有几点需要更改。首先，您将val传递到函数中，但使用price。我用价值代替了价格。

在javascript中，您不需要使用

global total;

total将已在函数内部可访问。

getElementById使用大小写，javascript区分大小写，因此最后一个字符需要小写。您还需要为复选框提供一个ID，而不仅仅是一个名称。

如果更新标记而不是document.write内部的innerHTML，它将更新值，而不是一个值接一个值地写入。你也有太多的括号。

<html><body>
<script>
    var total = 0;
    function updateTotal(row, val){
            if (document.getElementById(row).checked){
                total += val;
            }
            else {
                total -= val;
            }
            document.getElementById("price").innerHTML = total;
        }
</script>
<form>
<input type="checkbox" name="a" id="a" onChange="updateTotal('a',5)">5<br>
<input type="checkbox" name="b" id="b" onChange="updateTotal('b',3)">4<br>
<input type="checkbox" name="c" id="c" onChange="updateTotal('c',4)">3<br>
TOTAL: &pound; <x id="price">0</x>
</form>
</body>
</html>

存在许多问题。请看一下这个小提琴：jsfiddle

var total = 0;
function updateTotal(row, val) {
    if (document.getElementById(row).checked) {
        total += val;
    } else {
        total -= val;
    }
    console.log(total);
}
相关文章：