购物篮小计答案

【问题标题】：Shopping basket subtotal购物篮小计
【发布时间】：2012-07-11 03:38:39
【问题描述】：

希望有人可以帮助我！有一个简单的订单列表，但如果有人点击了一个选项，但随后改变主意并点击了不同的选项，它只是不断地将值加在一起......不知道如何解决它......代码如下

<html>
<head>
<script>
    total = 0;
    function Update_Subtotal(radio){
        price = radio.getAttribute("price");
        total = parseInt(total) + parseInt(price);
        document.getElementById("total").innerHTML = '£' + total;
}
</script>
</head>
<body>
<form name="form" method="post" action="">
    <fieldset>
        <legend>Option 1</legend> 
        <input type="radio" price="100" onclick="Update_Subtotal(this);" />Sub1
        <input type="radio" price="200" onclick="Update_Subtotal(this);" />Sub2
        <input type="radio" price="300" onclick="Update_Subtotal(this);" />Sub3
    </fieldset>
    <fieldset>
        <legend>Option 2</legend> 
        <input type="radio" price="10" onclick="Update_Subtotal(this);" />Sub1
        <input type="radio" price="20" onclick="Update_Subtotal(this);" />Sub2
        <input type="radio" price="30" onclick="Update_Subtotal(this);" />Sub3
</fieldset>
</form>
<div id="total"></div>
</body>
</html>

现在让我们在选项 1 中出售，我选择 sub2，然后在选项 2 中，我选择 sub 1... 我得到的总数是 210，这是正确的，但是，如果我改变主意并在选项 2 中选择 sub 3，我应该得到的答案是 230，但我得到的总数是 240

提前感谢您的帮助！

詹姆斯

【问题讨论】：

标签： javascript html onclick shopping-cart

【解决方案1】：

你需要检测radio是被checked还是unchecked，如果是unchecked则减去，尝试改变：

total = parseInt(total) + parseInt(price);

到

if(radio.checked){
    total = parseInt(total) + parseInt(price);
}
else{
    total = parseInt(total) - parseInt(price);
}

【讨论】：

【解决方案2】：

大概你至少需要做这两件事：

将price 更改为value
添加单选组名称

您可能还想做其他事情，但这里有一个相当简单的代码端口来完成这两件事。请注意，它不再需要您将实际的单选按钮传递给函数。每次都会重新计算。这意味着您也可以更好地在更高级别附加事件侦听器，而不必在标记中执行显式事件侦听器附加。

<html>
<head>
<script>
    total = 0;
    function Update_Subtotal() {
        var inputs = document.forms.form.elements, total = 0;;
        for (var i = 0, len = inputs.length; i < len; i++) {
            var input = inputs[i];
            if (input.checked) {
                total += parseFloat(input.value) || 0;
            }
        }
        document.getElementById("total").innerHTML = '£' + total;
}
</script>
</head>
<body>
<form name="form" method="post" action="">
    <fieldset>
        <legend>Option 1</legend> 
        <input name="opt1" type="radio" value="100" onclick="Update_Subtotal();" />Sub1
        <input name="opt1" type="radio" value="200" onclick="Update_Subtotal();" />Sub2
        <input name="opt1" type="radio" value="300" onclick="Update_Subtotal();" />Sub3
    </fieldset>
    <fieldset>
        <legend>Option 2</legend> 
        <input name="opt2" type="radio" value="10" onclick="Update_Subtotal();" />Sub1
        <input name="opt2" type="radio" value="20" onclick="Update_Subtotal();" />Sub2
        <input name="opt2" type="radio" value="30" onclick="Update_Subtotal();" />Sub3
</fieldset>
</form>
<div id="total"></div>
</body>
</html>

【讨论】：

这确实很好用，但我的代码在发布时有点简化。我已经添加了名称 attb，但是当我将表单传递给 php 脚本时，我已经使用了值 attb。有什么办法可以用我的原价 attb 做到这一点？我知道它不会验证，但我并不担心。谢谢

【解决方案3】：

在这种情况下，改变主意意味着首先撤消您所做的选择，然后再做出另一个选择。撤消第一个选择意味着减去您做出该选择时添加的数量。你永远不会减去任何地方。

您要做的是找到一种方法来记住第一选择是什么。为此，每个字段集一个变量就足够了。

【讨论】：