在 JS 中单击复选框时显示总价

Question

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

    <form action="" id="theForm">
        <fieldset>
            <legend>
                Products
            </legend>
            <label>
                <input name="product" value="12.95" type="checkbox" id="p1" onclick="total()"/>
                Candy .95
            </label>
            <label>
                <input name="product" value="5.99" type="checkbox" id="p2" onclick="total()"/>
                Burger .99
            </label>
            <label>
                <input name="product" value="1.99" type="checkbox" id="p3" onclick="total()"/>
                Coke .99
            </label>
            <label>
                Total 
                <input value="[=10=].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;
}

Answer 1

这一行...

var input = document.getElementById("form");

只会 return 一个 id 为 form 的元素 - 而这样的元素甚至不存在于您的示例中。您正在寻找的是...

var inputs = document.getElementsByName("product");

Answer 2

window.calculate = function(){
    var total = 0;
    var form = document.getElementById("theForm");
    var inputs = form.getElementsByTagName("input");
    
    for(var i = 0; i < inputs.length; i++){
        if(inputs[i].getAttribute("name") == "product" && inputs[i].checked)
            total += parseFloat(inputs[i].value);
    }
    alert(total);
}

<form action="" id="theForm">
        <fieldset>
            <legend>
                Products
            </legend>
            <label>
                <input name="product" value="12.95" type="checkbox" id="p1" onclick="calculate()"/>
                Candy .95
            </label>
            <label>
                <input name="product" value="5.99" type="checkbox" id="p2" onclick="calculate()"/>
                Burger .99
            </label>
            <label>
                <input name="product" value="1.99" type="checkbox" id="p3" onclick="calculate()"/>
                Coke .99
            </label>
            <label>
                Total 
                <input value="[=11=].00" readonly="readonly" type="text" id="total"/>
            </label>
        </fieldset>
        <input value="Submit" type="submit"/>
        <input value="Reset" type="reset"/>
    </form>

Answer 3

三个问题

1：使用document.getElementsByName("product");
2：重命名函数。似乎使用 total 作为字段的 ID 会干扰同名函数。
3：四舍五入结果

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 .95
            </label>
            <label>
                <input name="product" value="5.99" type="checkbox" id="p2" onclick="totalIt()"/>
                Burger .99
            </label>
            <label>
                <input name="product" value="1.99" type="checkbox" id="p3" onclick="totalIt()"/>
                Coke .99
            </label>
            <label>
                Total 
                <input value="[=11=].00" readonly="readonly" type="text" id="total"/>
            </label>
        </fieldset>
        <input value="Submit" type="submit"/>
        <input value="Reset" type="reset"/>
    </form>

Answer 4

只需创建一个表单变量并添加一个事件侦听器，即可像这样侦听和修改输入文本

function total_price(){
   let input = documnent.getElementsById('theForm'),
    total = 0.00,
    input = documnent.getElementsById('product');
    for (let i = 0; i <input.length; input++){
       if(input[i].checked){
         total += parseFloat(input[i].value)
       }
    }
    document.getElementById('total').value = total.toFixed(2)
}
document.getElementById('theForm').addEventListener('change', total_price)

在 JS 中单击复选框时显示总价

Display total price when checkbox clicked in JS

javascript

checkbox