在JS中单击复选框时显示总价格 [英] Display total price when checkbox clicked in JS

问题描述

我正在进行检查表格分配。所以，我有3个价格的产品，类型是复选框。总字段将仅显示已检查产品的总成本。但是，当我点击复选框时，总字段不显示任何内容。我错过了什么吗？任何的想法？谢谢！我的HTML和JS：

I am working on a checking form assignment. So, i have 3 products with price and the type is checkbox. The total field will display the total cost from only the checked products. However, when i click check the box the total field display nothing. Am I missing something? Any idea? Thank you! My HTML and JS:

    <form action="" id="theForm">
        <fieldset>
            <legend>
                Products
            </legend>
            <label>
                <input name="product" value="12.95" type="checkbox" id="p1" onclick="total()"/>
                Candy $12.95
            </label>
            <label>
                <input name="product" value="5.99" type="checkbox" id="p2" onclick="total()"/>
                Burger $5.99
            </label>
            <label>
                <input name="product" value="1.99" type="checkbox" id="p3" onclick="total()"/>
                Coke $1.99
            </label>
            <label>
                Total 
                <input value="$0.00" readonly="readonly" type="text" id="total"/>
            </label>
        </fieldset>
        <input value="Submit" type="submit"/>
        <input value="Reset" type="reset"/>
    </form>

JS

function total() {
        var input = document.getElementById("form");
        var total = 0;
        for (var i = 0; i < input.length; i++) {
                if (input[i].checked) {
                        total += parseFloat(input[i].value);
                }
        }
        document.getElementById("total").value = "$" + total;
}

推荐答案

三个问题

1：使用 document.getElementsByName（product）;

2：重命名该函数。似乎使用总计作为字段的ID会干扰相同名称的功能。

3：舍入结果

1: use document.getElementsByName("product");
2: Rename the function. Seems using total as ID for the field interferes with the function of the same name.
3: Round the result

function totalIt() {
  var input = document.getElementsByName("product");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }
  document.getElementById("total").value = "$" + total.toFixed(2);
}

 <form action="" id="theForm">
        <fieldset>
            <legend>
                Products
            </legend>
            <label>
                <input name="product" value="12.95" type="checkbox" id="p1" onclick="totalIt()"/>
                Candy $12.95
            </label>
            <label>
                <input name="product" value="5.99" type="checkbox" id="p2" onclick="totalIt()"/>
                Burger $5.99
            </label>
            <label>
                <input name="product" value="1.99" type="checkbox" id="p3" onclick="totalIt()"/>
                Coke $1.99
            </label>
            <label>
                Total 
                <input value="$0.00" readonly="readonly" type="text" id="total"/>
            </label>
        </fieldset>
        <input value="Submit" type="submit"/>
        <input value="Reset" type="reset"/>
    </form>

这篇关于在JS中单击复选框时显示总价格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！