Question

我正在创建一个用户可以购买商品的结帐页面。我设法给每个产品价格，但我不能做的就是给它们数量。我根本不知道该怎么做。我为他们创建了一个数量框，但我可以将两者联系起来。

我的目标是更新数量和总价格应显示在结帐表单上。

因为这是我上大学的作业，如果解决方案到了，必须严格按照javascript进行。

<script type="text/javascript">
function total(frm) {
    var tot = 0;
    for (var i = 0; i < frm.elements.length; i++) {
        if (frm.elements[i].type == "checkbox") {
            if (frm.elements[i].checked) tot += Number(frm.elements[i].value);
        }
    }
    document.getElementById("totalDiv").firstChild.data = "£" + tot;
    type = "text/javascript" >    total(document.getElementById("theForm"));
}
</script>

<form action="nextpage" method="post" id="theForm">
    <fieldset>
        <legend>Choose your Products</legend>
        <table style="padding:2px">
            <tr>
                <td>
                    <img src="http://placehold.it/200x200" />
                </td>
                <td>
                    <img src="http://placehold.it/200x200" />
                </td>
                <td>
                    <img src="http://placehold.it/200x200" />
                </td>
                <td>
                    <img src="http://placehold.it/200x200" />
                </td>
            </tr>
            <tr>
                <td class="buttons">
                    <div>
                        <input type="checkbox" name="r" value="25" onclick="total(this.form);" />£25</div>
                    <input min="0" max="5" type="number" class="quantity" name="quantity" value="1" />
                </td>
                <td class="buttons">
                    <div>
                        <input type="checkbox" name="7" value="50" onclick="total(this.form);" />£50</div>
                    <input min="0" max="5" type="number" class="quantity" name="quantity" value="1" />
                </td>
                <td class="buttons">
                    <div>
                        <input type="checkbox" name="asd7" value="75" onclick="total(this.form);" />£75</div>
                    <input min="0" max="5" type="number" class="quantity" name="quantity" value="1" />
                </td>
                <td class="buttons">
                    <div>
                        <input type="checkbox" name="rasd7" value="100" onclick="total(this.form);" />£100</div>
                    <input min="0" max="5" type="number" class="quantity" name="quantity" value="1" />
                </td>
            </tr>
        </table>
        <div id="totalDiv">&pound;0</div>
        <div>
            <input type="submit" value="Place Order" />
        </div>
    </fieldset>
</form>

http://jsfiddle.net/isherwood/96qkr/

Answer 1

简单快捷的解决方案

最简单的解决方案是：

Number(frm.elements[i].value) * Number(frm.elements[i+1].value);

由于数量元素总是在复选框元素之后出现。

然后JavaScript变为：

function total(frm) 
{
    var tot = 0;
    for (var i = 0; i < frm.elements.length; i++) {
        if (frm.elements[i].type == "checkbox") {
            if (frm.elements[i].checked) tot += 
                Number(frm.elements[i].value) * Number(frm.elements[i+1].value);
        }
    }
    document.getElementById("totalDiv").firstChild.data = "£" + tot;
}

您可以看到此作品here。

为确保在更改数量时total div也会更新，您还应将onclick="total(this.form);"事件添加到class="quantity"输入元素。

你可以看到它有多好用here。

更高级的解决方案

就个人而言，我会使用tabIndex对checkbox和quality输入进行分组。

例如，对于第一个产品：

<td class="buttons">
 <div>
  <input tabindex="1" name="checkbox" type="checkbox" value="25" onclick="total(this.form);"  />£25</div>
  <input tabindex="1" name="quantity" min="0" max="5" type="number" class="quantity" value="1" onclick="total(this.form);"/>
</td>

如您所见，我已明确定义了tabIndex和names。

现在对于JavaScript，我现在使用：

function total(frm) 
{
    var tot         = 0;
    var checkboxes  = document.forms[frm.id].elements["checkbox"];
    var quants      = document.forms[frm.id].elements["quantity"];

    for (var i = 0; i < checkboxes.length; i++) 
    {
        if (checkboxes[i].checked) 
        {
            // if tabIndex correctly specified
            if (checkboxes[i].tabIndex == quants[i].tabIndex)
                // add to total
                tot += Number(checkboxes[i].value) * Number(quants[i].value);
            else
                // notify of bug
                alert('Bug in code: tabIndex of checkbox '+i+' is not the same as tabIndex quantity '+i);
        }
    }
    document.getElementById("totalDiv").firstChild.data = "£" + tot;
}

通过这种方式，您可以获得以下优势：

您的HTML代码更有意义（输入元素按tabIndex分组）
检查您的代码是否存在错误
您绝对相信您可以乘以正确的输入元素

您可以找到此代码in this jsFiddle。

祝你好运！我希望这会帮助你！

更新

要创建一种结帐系统，您可以再次检查所有元素并将它们存储在变量中。

然后确保表单在提交时实现一个函数：

action="javascript:checkout()"

总的来说：

<form action="javascript:checkout()" id="theForm">

创建消息的最简单方法是使用一个变量：

function checkout()
{
    var message = "";

    var checkboxes  = document.forms["theForm"].elements["checkbox"];
    var quants      = document.forms["theForm"].elements["quantity"];

    for (var i = 0; i < checkboxes.length; i++) 
    {
        if (checkboxes[i].checked) 
        {
            switch(checkboxes[i].tabIndex)
            {
                case 1: message += "iPhone"; break;
                case 2: message += "Screen"; break;
                case 3: message += "Laptop"; break;
                case 4: message += "Coffee"; break;
                default: message += "";
            }

            message += "     Quantity:   " + Number(quants[i].value) + "     Price: £" +                       Number(checkboxes[i].value) * Number(quants[i].value) + "\n";
        }
    }    
    message += "\nTotal:   " + document.getElementById("totalDiv").firstChild.data;

    alert(message);   
}

您可以找到此here的工作实现。

花式解决方案

或者，如果您想让它更加花哨，您可以执行以下操作：

添加以下HTML：

`HTML`

<br><br>
<div id="checkout">
    <table id="myTable" border="1">
    <tr>
    <td>Product</td>
    <td>Quantity</td>
    <td>Price</td>
    </tr>
    </table>
</div>

添加以下JavaScript函数：

`JavaScript`

function checkout()
{
    document.getElementById("checkout").innerHTML = '<table id="myTable" border="1"><tr><td><b>Product</b></td><td><b>Quantity</b></td><td><b>Price</b></td></tr></table>';

    // Find a <table> element with id="myTable":
    var table = document.getElementById("myTable");

    var count   = 0;
    var max     = 0;

    var checkboxes  = document.forms["theForm"].elements["checkbox"];
    var quants      = document.forms["theForm"].elements["quantity"];

    for (var i = 0; i < checkboxes.length; i++) 
    {
        if (checkboxes[i].checked) 
        {
            switch(checkboxes[i].tabIndex)
            {
                case 1: message = "iPhone"; break;
                case 2: message = "Screen"; break;
                case 3: message = "Laptop"; break;
                case 4: message = "Coffee"; break;
            }

            count += Number(quants[i].value);
            max   += 1;

            // Create an empty <tr> element and add it to the table:
            var row = table.insertRow(max);

            // Insert new cells (<td> elements) at the 1st, 2nd and 3rd position 
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);

            // Add some text to the new cells:
            cell1.innerHTML = message;
            cell2.innerHTML = Number(quants[i].value); 
            cell3.innerHTML = "£" + Number(checkboxes[i].value) * Number(quants[i].value); 
        }
    }    
        // Calculate total
        var row = table.insertRow(max+1);

        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);

        cell1.innerHTML = "<b>Total</b>";
        cell2.innerHTML = count; 
        cell3.innerHTML = document.getElementById("totalDiv").firstChild.data; 
}

结果如下：

enter image description here

您可以找到相应的jsFiddle HERE。

希望能帮到你！

实施数量更新产品价格和总价格

1 个答案:

简单快捷的解决方案

更高级的解决方案

更新

花式解决方案

`HTML`

`JavaScript`