Javascript 按下浮动并相乘
Javascript parseFloat and multiply
我有一些复选框，选中后会更新底部的总价，而且效果很好。但是，我还添加了一个单独的输入字段来输入数量。我试图让这个数量乘以输入字段的值。现在我只有将文本输入字段添加到总数的代码，而不是将它乘以它旁边的字段。
这是我的代码：
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=" +0.00">
10'x10' inline
<span class="ginput_price"> +0.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=" +5.00">
10'x10' - 1 corner (very limitied supply)
<span class="ginput_price"> +5.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=" +,000.00">
10'x10' - 2 corner (very limitied supply)
<span class="ginput_price"> +,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=" +,435.00">
10'x15' - 1 corner or inline
<span class="ginput_price"> +,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=" +,900.00">
10'x20' - 1 corner or inline
<span class="ginput_price"> +,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=" +,850.00">
10'x30' - 1 corner or inline
<span class="ginput_price"> +,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=" +,800.00">
20'x20' - 2 corner endcap
<span class="ginput_price"> +,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=" +,000.00">
20'x20' - 4 corner island
<span class="ginput_price"> +,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=" +,650.00">
20'x30' - 2 corner encap
<span class="ginput_price"> +,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">
关于如何实现这一点有什么想法吗？
将 data-qty 属性添加到包含输入字段 ID 和数量的复选框。然后就可以用价格乘以对应输入的数量了。
function 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;
<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" data-qty="Q1" name="HI1" onChange="updateTotal();">
<label id="label_9_34_1" for="HT1" price=" +0.00">
10'x10' inline
<span class="ginput_price"> +0.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" data-qty="Q2" name="HI2" onChange="updateTotal();">
<label id="label_9_34_2" for="HT2" price=" +5.00">
10'x10' - 1 corner (very limitied supply)
<span class="ginput_price"> +5.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" data-qty="Q3" name="HI3" onChange="updateTotal();">
<label id="label_9_34_3" for="HT3" price=" +,000.00">
10'x10' - 2 corner (very limitied supply)
<span class="ginput_price"> +,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" data-qty="Q4" name="HI4" onChange="updateTotal();">
<label id="label_9_34_4" for="HT4" price=" +,435.00">
10'x15' - 1 corner or inline
<span class="ginput_price"> +,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" data-qty="Q5" name="HI5" onChange="updateTotal();">
<label id="label_9_34_5" for="HT5" price=" +,900.00">
10'x20' - 1 corner or inline
<span class="ginput_price"> +,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" data-qty="Q6" name="HI6" onChange="updateTotal();">
<label id="label_9_34_6" for="HT6" price=" +,850.00">
10'x30' - 1 corner or inline
<span class="ginput_price"> +,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" data-qty="Q7" name="HI7" onChange="updateTotal();">
<label id="label_9_34_7" for="HT7" price=" +,800.00">
20'x20' - 2 corner endcap
<span class="ginput_price"> +,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" data-qty="Q8" name="HI8" onChange="updateTotal();">
<label id="label_9_34_8" for="HT8" price=" +,000.00">
20'x20' - 4 corner island
<span class="ginput_price"> +,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" data-qty="Q9" price=" +,650.00">
20'x30' - 2 corner encap
<span class="ginput_price"> +,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">
我有一些复选框，选中后会更新底部的总价，而且效果很好。但是，我还添加了一个单独的输入字段来输入数量。我试图让这个数量乘以输入字段的值。现在我只有将文本输入字段添加到总数的代码，而不是将它乘以它旁边的字段。
这是我的代码：
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=" +0.00">
10'x10' inline
<span class="ginput_price"> +0.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=" +5.00">
10'x10' - 1 corner (very limitied supply)
<span class="ginput_price"> +5.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=" +,000.00">
10'x10' - 2 corner (very limitied supply)
<span class="ginput_price"> +,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=" +,435.00">
10'x15' - 1 corner or inline
<span class="ginput_price"> +,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=" +,900.00">
10'x20' - 1 corner or inline
<span class="ginput_price"> +,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=" +,850.00">
10'x30' - 1 corner or inline
<span class="ginput_price"> +,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=" +,800.00">
20'x20' - 2 corner endcap
<span class="ginput_price"> +,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=" +,000.00">
20'x20' - 4 corner island
<span class="ginput_price"> +,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=" +,650.00">
20'x30' - 2 corner encap
<span class="ginput_price"> +,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">
关于如何实现这一点有什么想法吗？
将 data-qty 属性添加到包含输入字段 ID 和数量的复选框。然后就可以用价格乘以对应输入的数量了。
function 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;
<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" data-qty="Q1" name="HI1" onChange="updateTotal();">
<label id="label_9_34_1" for="HT1" price=" +0.00">
10'x10' inline
<span class="ginput_price"> +0.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" data-qty="Q2" name="HI2" onChange="updateTotal();">
<label id="label_9_34_2" for="HT2" price=" +5.00">
10'x10' - 1 corner (very limitied supply)
<span class="ginput_price"> +5.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" data-qty="Q3" name="HI3" onChange="updateTotal();">
<label id="label_9_34_3" for="HT3" price=" +,000.00">
10'x10' - 2 corner (very limitied supply)
<span class="ginput_price"> +,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" data-qty="Q4" name="HI4" onChange="updateTotal();">
<label id="label_9_34_4" for="HT4" price=" +,435.00">
10'x15' - 1 corner or inline
<span class="ginput_price"> +,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" data-qty="Q5" name="HI5" onChange="updateTotal();">
<label id="label_9_34_5" for="HT5" price=" +,900.00">
10'x20' - 1 corner or inline
<span class="ginput_price"> +,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" data-qty="Q6" name="HI6" onChange="updateTotal();">
<label id="label_9_34_6" for="HT6" price=" +,850.00">
10'x30' - 1 corner or inline
<span class="ginput_price"> +,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" data-qty="Q7" name="HI7" onChange="updateTotal();">
<label id="label_9_34_7" for="HT7" price=" +,800.00">
20'x20' - 2 corner endcap
<span class="ginput_price"> +,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" data-qty="Q8" name="HI8" onChange="updateTotal();">
<label id="label_9_34_8" for="HT8" price=" +,000.00">
20'x20' - 4 corner island
<span class="ginput_price"> +,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" data-qty="Q9" price=" +,650.00">
20'x30' - 2 corner encap
<span class="ginput_price"> +,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">