javascript - 如何: Total that multiplies price by quantity

Question

我使用 list.js 的改编版本制作了价目表。

目前，我在每行产品旁边都有复选框，选中的每个复选框都会添加到总数中，这是正确的。

我在每个复选框旁边添加了一个数量输入，但我希望这个数量乘以价格(目前没有 js)。这是到目前为止的代码片段。

JS:

<script>
 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);
 }
</script>

HTML:

<tr>
 <td class="id" style="display:none;">1</td>
 <td name="unit" class="unit">300mm Base Unit</td>
 <td name="range" class="range">Amalfi</td>
 <td name="style" class="style">Cream Gloss</td>
 <td name="price" class="price">&pound;45.94
 <input name="product" value="45.94" type="checkbox" class="tickbox" id="squaredThree" onclick="totalIt()"/>
 <label for="squaredThree"></label>
 <input type="number" name="quantity" min="1" max="10" placeholder="Quantity"></td>
</tr>
<tr>
 <td class="id" style="display:none;">1</td>
 <td class="unit">400mm Base Unit</td>
 <td class="range">Amalfi</td>
 <td class="style">Cream Gloss</td>
 <td class="price">&pound;47.94
 <input name="product" value="45.94" type="checkbox" class="tickbox"    id="squaredThree2" onclick="totalIt()"/>
 <label for="squaredThree2"></label>
 <input type="number" name="quantity" min="1" max="10" placeholder="Quantity"></td>
</tr>

如果有人能抽出时间更新 JS 以执行此类功能，或者可以给我任何指导，我将不胜感激。

谢谢。

Answer 1

您只需将产品值乘以相关的数量字段即可:

function totalIt() {
    var products = document.getElementsByName("product");
    var quantities = document.getElementsByName("quantity");
    var total = 0;
    for (var i = 0; i < products.length; i++) {
        if (products[i].checked) {
            total += parseFloat(products[i].value) * parseInt(quantities[i].value, 10);
        } 
    }
    document.getElementById("total").value = "£" + total.toFixed(2);
}