Javascript 单选/复选框问题

标签 javascript checkbox radio-button cumulative-sum

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

<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 错误:

  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. 没有真正需要 total 变量。如果您想记住这是总数,只需添加评论即可。

查看此 jsFiddle: http://jsfiddle.net/F53ae/看看它的实际效果。

关于Javascript 单选/复选框问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7591792/

相关文章:

javascript - 是否可以忽略 keyCode = 229 的按键事件?

javascript - 收集多个数据并在 laravel 中通过 ajax 发送

html - 如何处理不确定复选框的浏览器差异

java - 获取Swing中复选框的数量

Android - 带有单选单选按钮的 ListView

javascript - 从同一页面调用两个按钮不起作用

javascript - jQuery 选择器作为属性存储在命名空间中

Javascript - 如何获取复选框组的总和

javascript - 在 JavaScript 中,如何获取页面中具有给定名称的所有单选按钮?

javascript - 如果取消选中单选按钮,则删除单元格的值