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

您只需将product值乘以相关的quantity字段：

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

如何：总价格乘以数量

1 个答案: