我有一些复选框，检查后会更新底部的价格总额，并且效果很好。但是，我还添加了一个单独的输入字段来输入数量。我试图将该数量乘以输入字段的值。现在我只有代码将文本输入字段添加到总数而不是将它乘以它旁边的字段。
这是我的代码：
function updateTotal() {
var HI1 = document.getElementById('HI1');
var HI2 = document.getElementById('HI2');
var HI3 = document.getElementById('HI3');
var HI4 = document.getElementById('HI4');
var HI5 = document.getElementById('HI5');
var HI6 = document.getElementById('HI6');
var HI7 = document.getElementById('HI7');
var HI8 = document.getElementById('HI8');
var HI9 = document.getElementById('HI9');
var HI9 = document.getElementById('HI9');
var inputs = document.getElementsByName('Q');
var amount = 0;
for (var i = 0; i < inputs.length; i++) {
var ip = inputs[i];
if (ip.name && ip.name.indexOf("total") < 0) {
amount += parseInt(ip.value) || 0;
}
}
amount += HI1.checked ? parseFloat(HI1.getAttribute('data-price')) : 0;
amount += HI2.checked ? parseFloat(HI2.getAttribute('data-price')) : 0;
amount += HI3.checked ? parseFloat(HI3.getAttribute('data-price')) : 0;
amount += HI4.checked ? parseFloat(HI4.getAttribute('data-price')) : 0;
amount += HI5.checked ? parseFloat(HI5.getAttribute('data-price')) : 0;
amount += HI6.checked ? parseFloat(HI6.getAttribute('data-price')) : 0;
amount += HI7.checked ? parseFloat(HI7.getAttribute('data-price')) : 0;
amount += HI8.checked ? parseFloat(HI8.getAttribute('data-price')) : 0;
amount += HI9.checked ? parseFloat(HI9.getAttribute('data-price')) : 0;
document.getElementById('price').value = "$" + amount;
}
window.onload = updateTotal;<ul id="input_9_34" class="gfield_checkbox">
<li class="gchoice_9_34_1">
<input id="HI1" type="checkbox" tabindex="22" value="10'x10'|950" data-price="950" name="HI1" onChange="updateTotal();">
<label id="label_9_34_1" for="HT1" price=" +$950.00">
10'x10' inline
<span class="ginput_price"> +$950.00</span>
</label>
| Quantity:
<input type="text" name="Q" id="Q1" value="0" class="quantity" onChange="updateTotal();">
</li>
<li class="gchoice_9_34_2">
<input id="HI2" type="checkbox" tabindex="23" value="10'x10'|975" data-price="975" name="HI2" onChange="updateTotal();">
<label id="label_9_34_2" for="HT2" price=" +$975.00">
10'x10' - 1 corner (very limitied supply)
<span class="ginput_price"> +$975.00</span>
</label>
| Quantity:
<input type="text" name="Q" id="Q2" value="0" class="quantity" onChange="updateTotal();">
</li>
<li class="gchoice_9_34_3">
<input id="HI3" type="checkbox" tabindex="24" value="10'x10'|1000" data-price="1000" name="HI3" onChange="updateTotal();">
<label id="label_9_34_3" for="HT3" price=" +$1,000.00">
10'x10' - 2 corner (very limitied supply)
<span class="ginput_price"> +$1,000.00</span>
</label>
| Quantity:
<input type="text" name="Q" id="Q3" value="0" class="quantity">
</li>
<li class="gchoice_9_34_4">
<input id="HI4" type="checkbox" tabindex="25" value="10'x15'|1435" data-price="1435" name="HI4" onChange="updateTotal();">
<label id="label_9_34_4" for="HT4" price=" +$1,435.00">
10'x15' - 1 corner or inline
<span class="ginput_price"> +$1,435.00</span>
</label>
| Quantity:
<input type="text" name="Q4" id="Q4" value="0" class="quantity">
</li>
<li class="gchoice_9_34_5">
<input id="HI5" type="checkbox" tabindex="26" value="10'x20'|1900" data-price="1900" name="HI5" onChange="updateTotal();">
<label id="label_9_34_5" for="HT5" price=" +$1,900.00">
10'x20' - 1 corner or inline
<span class="ginput_price"> +$1,900.00</span>
</label>
| Quantity:
<input type="text" name="Q5" id="Q5" value="0" class="quantity">
</li>
<li class="gchoice_9_34_6">
<input id="HI6" type="checkbox" tabindex="27" value="10'x30'|2850" data-price="2850" name="HI6" onChange="updateTotal();">
<label id="label_9_34_6" for="HT6" price=" +$2,850.00">
10'x30' - 1 corner or inline
<span class="ginput_price"> +$2,850.00</span>
</label>
| Quantity:
<input type="text" name="Q6" id="Q6" value="0" class="quantity">
</li>
<li class="gchoice_9_34_7">
<input id="HI7" type="checkbox" tabindex="28" value="20'x20'|3800" data-price="3800" name="HI7" onChange="updateTotal();">
<label id="label_9_34_7" for="HT7" price=" +$3,800.00">
20'x20' - 2 corner endcap
<span class="ginput_price"> +$3,800.00</span>
</label>
| Quantity:
<input type="text" name="Q7" id="Q7" value="0" class="quantity">
</li>
<li class="gchoice_9_34_8">
<input id="HI8" type="checkbox" tabindex="29" value="20'x20'|4000" data-price="4000" name="HI8" onChange="updateTotal();">
<label id="label_9_34_8" for="HT8" price=" +$4,000.00">
20'x20' - 4 corner island
<span class="ginput_price"> +$4,000.00</span>
</label>
| Quantity:
<input type="text" name="Q8" id="Q8" value="0" class="quantity">
</li>
<li class="gchoice_9_34_9">
<input id="HI9" type="checkbox" tabindex="30" value="20'x30'|5650" data-price="5650" name="HI9" onChange="updateTotal();">
<label id="label_9_34_9" for="HT9" price=" +$5,650.00">
20'x30' - 2 corner encap
<span class="ginput_price"> +$5,650.00</span>
</label>
| Quantity:
<input type="text" name="Q9" id="Q9" value="0" class="quantity">
</li>
</ul>
Total Price:
<input name="price" id="price" type="text" readonly="readonly" class="total">
关于如何做到这一点的任何想法？
答案 0 :(得分：1)
在复选框中添加SYS属性，其中包含输入字段的ID和数量。然后，您可以将价格乘以相应输入中的数量。
data-qtyfunction updateTotal() {
var checkboxes = document.querySelectorAll("input[type=checkbox]");
var inputs = document.getElementsByName('Q');
var amount = 0;
for (var i = 0; i < checkboxes.length; i++) {
var cb = checkboxes[i];
if (cb.checked) {
var input = document.getElementById(cb.getAttribute('data-qty'));
var qty = input.value;
if (qty != '') {
var price = cb.getAttribute('data-price');
amount += price * qty;
}
}
}
document.getElementById('price').value = "$" + amount;
}
window.onload = updateTotal;