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

您没有更新变量总数。

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

Answer 2

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

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

您还需要将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

复选框计算不起作用

2 个答案: