复选框计算不起作用

Question

嘿家伙我有一个关于实时计算复选框及其总数的问题所以这是我的代码：

function calc() 

{
    theTotal = 0;
    checkForm = document.FormName;
    for (i=0; i <= checkForm.length-1; i++) {
        if (checkForm.elements[i].type == "checkbox") {
            if (checkForm.elements[i].checked == true) {
                document.getElementById("total").value = theTotal;
            }
        }
    }
    document.getElementById("total").innerHTML = theTotal;
}

这是我的HTML代码：

<p>Total: $<span id="total">0</span></p>

    <tr>
    <td> <br> <center> <img src="Shirt1.jpg" width="160" height="150" alt="shirt1"> <br> <input type="checkbox" onchange="calc()" value="19.99"> <label for="rd1">Obey T-Shirt: $19.99</label> </center> </br></td>
    <td> <br> <center> <img src="Shoe1.jpg" width="160" height="150" alt="shoe1"> <br> <input type="checkbox" onchange="calc()" value="19.99"> <label for="rd1">Shoe - Red Lace: $19.99</label> </center> </br> </td>
    <td> <br> <center> <img src="Snapback1.jpg" width="160" height="150" alt="snap1"> <br> <input type="checkbox" onchange="calc()" value="19.99"> <label for="rd1">Snapback Bullets: $19.99</label> </center> </br> </td>
</tr>

当我点击其中一个选中的复选框时，它不会给我我想要的计算。你能帮我这个吗？

Answer 1

你的代码中似乎有很多问题。在这里，我为你写的更简单。

您不需要遍历每个表单元素，即使您使用每个复选框单独调用它也是如此。

您还需要将theTotal作为全局变量，以便拥有总检查项目。现在，您在每个函数调用时将其重置为0。

你可以试试这个

var theTotal = parseFloat(0);

function calc(control) {
    if (control.checked == true) {
        theTotal += parseFloat(control.value);
    } else {
        theTotal -= parseFloat(control.value);
    }
    document.getElementById("total").innerHTML = theTotal;
}

并称之为这样

<input type="checkbox" onchange="calc(this)" value="19.99">

JS Fiddle Demo

Answer 2

您没有更新变量总数。

您应该读取已检查输入的.value