Javascript Radio / Checkbox问题

时间:2011-09-29 02:25:49

标签: javascript checkbox radio running-total

我有这个简单的脚本。我正在尝试获取已检查的值并将它们添加到已打开的输入框中的运行总计中。我知道它正在检查选项,但它没有更新到输入框,我不知道为什么。任何人都可以帮助我吗?

<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>

2 个答案:

答案 0 :(得分:5)

您有一些基本的Javascript错误:

  1. 你的for循环看起来像:

    for(var i = 0; i <= type.length; i++)
    

    这意味着它们将从0变为长度(包括长度)=长度+ 1
    它应该是:

    for(var i = 0; i < type.length; i++)
    

    看到差异? <=现在是<(关闭一个错误?)

  2. 您正在使用toppings变量两次。 (javascript非常糟糕,让你自己开枪。)你也应该初始化所有的值。

    var type = document.pizzaForm.pizzaType;
    var toppings = document.pizzaForm.toppings; 
    var pizzaTypeValue = 0;
    var toppingsValue = 0;
    

    我还将Value添加到包含数字而不是元素的变量中。其他可能为此或某些此类约定添加前缀以记住它包含的值不是元素列表。

  3. 标记中的值是字符串使用parseFloat(将它们变成浮点数:

    pizzaTypeValue += parseFloat(type[i].value); 
    

    还注意到+=表示:将此添加给我。相当于pizzaTypeValue = pizzaTypeValue + ...

  4. 不需要总变量。如果你想记住它是总数,只需添加评论。

  5. 请参阅此jsFiddle: http://jsfiddle.net/F53ae/以查看其实际效果。

答案 1 :(得分:1)

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