Javascript 单选/复选框问题

发布于 2024-12-07 06:23:51 字数 1803 浏览 0 评论 0 原文

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

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

原文

I have this simple script. I'm trying to get the checked values and add them to a running total that's in the diabled input box. I know it's getting checked option but it's not updating to the input box and I'm not sure why. Can anyone help me?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

淡墨 2024-12-14 06:23:51

您有一些基本的 Javascript 错误：

您的 for 循环如下所示：
```
for(var i = 0; i <= type.length; i++)
```
这意味着它们将从 0 到 length（包括 length）= length + 1
应该是：
```
for(var i = 0; i < type.length; i++)
```
看出区别了吗？ <= 现在是 <。 （有一个错误？）
您使用了 toppings 变量两次。 （javascript 在这方面确实很糟糕，会让你搬起石头砸自己的脚。） 另外，你应该初始化所有值。
```
var type = document.pizzaForm.pizzaType;
var toppings = document.pizzaForm.toppings; 
var 披萨类型值 = 0;
var 配料值 = 0;
```
我还将 Value 添加到保存数字而不是元素的变量中。其他人可能会为此或某些此类约定添加前缀，以记住它保存的是一个值而不是元素列表。
标记中的值是字符串，使用parseFloat(将它们转换为浮点数：
```
pizzaTypeValue += parseFloat(type[i].value); 
```
另请注意 += 的含义：将其添加给我。相当于 pizzaTypeValue = PizzaTypeValue + ...。
实际上并不需要如果需要，只需添加注释即可。想要记住它是总数。

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

You have a few basic Javascript errors:

your for loops look like:
```
for(var i = 0; i <= type.length; i++)
```
this means they will go from 0 to length (including length) = length + 1
It should be:
```
for(var i = 0; i < type.length; i++)
```
see the diffference? <= is now <. (off by one error?)
you are using toppings variable twice. (javascript is really bad with this and lets you shoot yourself in the foot.) Also you should be initialisng all values.
```
var type = document.pizzaForm.pizzaType;
var toppings = document.pizzaForm.toppings; 
var pizzaTypeValue = 0;
var toppingsValue = 0;
```
I've also added Value to the variables that hold numbers rather than elements. Other might prefix this or some such convention to remember it holds a value not a list of elements.
the values in markup are strings use parseFloat( to turn them into floats:
```
pizzaTypeValue += parseFloat(type[i].value); 
```
also note the += means: add this to me. Equivalent to pizzaTypeValue = pizzaTypeValue + ....
there is no real need for the total variable. just add a comment if you want to remember it is the total.