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

我正在创建一个结账页面，用户可以在其中购买商品。我已经设法给每种产品定出了价格，但我不能做的是给它们定出数量。我简直不知道怎么做。我为它们创建了一个数量框，但我可以将两者链接起来

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

因为这是我大学的家庭作业，所以如果有解决方案的话，这必须用严格的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>

功能总计（frm）{
var-tot=0；
对于（变量i=0；i总计（document.getElementById（“theForm”）；
}
选择你的产品
£25
£50
£75
£100
&磅；0

简单快速的解决方案 最简单的解决方案是：

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

因为quantity元素总是在checkbox元素之后

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

如您所见，我已经明确定义了

选项卡索引

和

名称

对于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;
}

因此，总的来说：

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

添加以下JavaScript函数：

JavaScript

函数签出（）
{
document.getElementById（“checkout”）.innerHTML='ProductQuantityPrice'；
//查找id为=“myTable”的元素：
var table=document.getElementById（“myTable”）；
var计数=0；
var max=0；
var checkbox=document.forms[“theForm”]。elements[“checkbox”]；
var quants=document.forms[“theForm”]。elements[“quantity”]；
对于（变量i=0；i

结果如下所示：

您可以找到相应的JSFIDLE

---

希望这能帮到你

您需要区分输入元素的类型（使用类型、类或其他属性），然后将数量乘以价格。看起来脚本的最后一行也有一些错误代码。@user3423164:请参阅下面的答案。OMG！。这正是我需要的。它按照我的预期工作。非常感谢你！！！如果您不介意的话，可以解释一下if-ELSE中的通知bug部分。当然，您不一定需要

if-ELSE

，但是它确保

复选框的
tabIndex
和
数量
是相同的。所以这只是对代码的额外检查。如果你知道你的代码写得很好，你可以省去它（只需删除
If
和
else
块）。@user3423164:当然。欢迎来到堆栈溢出。如果您已经获得了15的经验，您可以考虑对任何已接受的答案进行投票以授予额外的声誉：）@ USER 324164：还注意到用户不能点击超过5（<代码> MAX＝5） >，但是当用户手动地键入高于5的数字时，它仍然被处理。在
total（frm）
中，您还可以通过引入另一个
if
语句来防止这种情况（如果您愿意），该语句检查
quants[i].value
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);   
}

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

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