Javascript parseFloat 和 multiply

Question

我有一些复选框，选中后会更新底部的总价，它们效果很好。不过，我还添加了一个单独的输入字段来输入数量。我试图让该数量乘以输入字段的值。现在我只有将文本输入字段添加到总数中的代码，而不是将其乘以旁边的字段。

这是我的代码:

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">

关于如何实现这一目标有什么想法吗？

Answer 1

将 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=" +$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" data-qty="Q2" 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" data-qty="Q3" 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" data-qty="Q4" 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" data-qty="Q5" 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" data-qty="Q6" 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" data-qty="Q7" 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" data-qty="Q8" 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" data-qty="Q9" 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">