Javascript单选/复选框问题答案

【问题标题】：Javascript Radio / Checkbox ProblemsJavascript单选/复选框问题
【发布时间】：2011-09-29 02:25:48
【问题描述】：

我有这个简单的脚本。我正在尝试获取检查的值并将它们添加到禁用输入框中的运行总计中。我知道它正在检查选项，但它没有更新到输入框，我不知道为什么。谁能帮帮我？

<html>
<head>
<script type="text/javascript">
    function updateForm()
    {
        var type = document.pizzaForm.pizzaType;
        var toppings = document.pizzaForm.toppings; 
        var pizzaType;
        var toppings;

        for(var i = 0; i <= type.length; i++)
        {
            if(type[i].checked)
            {
                total = type[i].value;
            }
        }

        for(var i = 0; i <= toppings.length; i++)
        {
            if(toppings[i].checked)
            {
                toppings += toppings[i].value;
            }
        }

        var total = pizzaType + toppings;

        pizzaForm.total.value = total;
    }
</script>
</head>
<body>
    <h1>Order Pizza Here:</h1>
    <form action="" method="get" name="pizzaForm">
        What Type of Pizza Would You Like? <br />
        <input type="radio" name="pizzaType" value="10.00" onchange="updateForm()" />Vegetarian<br />
        <input type="radio" name="pizzaType" value="20.00" onchange="updateForm()" />Meat Lovers<br />
            <br />
            <br />
        Extra Toppings: <br />
        <input type="checkbox" name="toppings" value="2.00" onchange="updateForm()" />Extra Cheese <br />
        <input type="checkbox" name="toppings" value="3.00" onchange="updateForm()" />Mushrooms <br />
        <input type="checkbox" name="toppings" value="4.00" onchange="updateForm()" />Anchovies <br />
            <br />
        Total <input type="text" disabled="disabled" name="total" />
    </form>
</body>
</html>

【问题讨论】：

标签： javascript checkbox radio cumulative-sum

【解决方案1】：

您有一些基本的 Javascript 错误：

你的 for 循环看起来像：
```
for(var i = 0; i <= type.length; i++)
```
这意味着它们将从 0 变为长度（包括长度）= 长度 + 1
应该是：
```
for(var i = 0; i < type.length; i++)
```
看到区别了吗？ <= 现在是 <。 （因一个错误而关闭？）
您使用了两次toppings 变量。 （javascript 在这方面真的很糟糕，让你在脚上开枪。）你还应该初始化所有值。
```
var type = document.pizzaForm.pizzaType;
var toppings = document.pizzaForm.toppings; 
var pizzaTypeValue = 0;
var toppingsValue = 0;
```
我还在保存数字而非元素的变量中添加了Value。其他人可能会为此或某些此类约定添加前缀，以记住它包含一个值而不是元素列表。
标记中的值是字符串，使用parseFloat( 将它们转换为浮点数：
```
pizzaTypeValue += parseFloat(type[i].value); 
```
还要注意+= 的意思：把这个加给我。相当于pizzaTypeValue = pizzaTypeValue + ...。
没有真正需要总变量。如果您想记住它是总数，只需添加评论即可。

查看此jsFiddle: http://jsfiddle.net/F53ae/ 以了解其实际效果。

【讨论】：

+1 打败我。好总结。您不需要两个总变量，只需将所有变量加起来，但这很小。最好只在顶部定义一个计数器，而不是两次声明var i。
@Dennis 您对两个总变量和两次声明 i 都是正确的。我认为我的答案有点长，我认为这些东西并不是真正需要的。我还假设这是一个家庭作业问题（让我想起了我在数据结构课上做过的一个问题，除了我们必须使用 c++），我想在其中留下一些 OP 的痕迹。 ;)
是的，我真的希望浏览器 javascript 调试器能像大多数编程 IDE 一样深入一点。我完全忘记了，即使 value 是一个数字，它仍然是一个字符串！谢谢！我仍然不太了解“
@Howdy_McGee 在列表中：[ "meh", "tah", "Bah"] 索引为0, 1, 2，长度为3。所以<= 意味着您将尝试访问list[3]，这将引发错误并且您的函数将无法完成。

【解决方案2】：

这是工作代码。我把它放在 jsfiddle 给你。主要问题是您有两个名为 toppings 的变量。此外，在第一个循环中，当您打算设置另一个总数时，您正在设置“总计”变量。看看这个。 http://jsfiddle.net/eXPAj/1/

【讨论】：

我希望我能给你们两个绿色支票，但上面的海报有更深入的解释。不过谢谢！