在javascript添加中循环多个复选框

Question

我有一个简单的复选框计算器，它几乎可以添加检查的项目。我怎样才能分开总价格。我的问题是选择食物时它没有显示在正确的位置。

有没有办法根据勾选的项目在正确的位置显示价格。例如，来自技术的项目应显示在该字段集的 totalPrice 中，从食品检查的项目应显示在该字段集的 totalPrice 中.我努力使代码尽可能直观，任何帮助或提示将不胜感激。

function priceAddition() {
  var input = document.getElementsByName("option");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }
  document.getElementById("totalPrice").innerHTML = "$" + total.toFixed(2);
}

<form method="post" oninput="priceAddition();">
          <div class="grid-container">
            <fieldset id="fieldset">
              <legend>Prices</legend>
              <div class="items-container">
                <h3>Technology</h3>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="2500"> 4K Television $2500
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="250"> Speakers $250
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="500"> Laptop $500
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="500"> Gaming Console $500
                  </label>
                </div>    
              <div class="items-container">
              <div class="price">
                <br>
                <h3>Total estimated price for technology: </h3>
                <p id="totalPrice">$0.00</p>
              </div>
            </fieldset>
          </div>
        </form>
        
        <form method="post" oninput="priceAddition();">
          <div class="grid-container">
            <fieldset id="fieldset">
              <legend>Prices</legend>
              <div class="items-container">
                <h3>Food</h3>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="12.99"> 1kg of Chicken $12.99
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="5"> Grapes $5
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="22"> Salmon Fish $22
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="30"> 12 Donuts $30
                  </label>
                </div>    
              <div class="items-container">
              <div class="price">
                <br>
                <h3>Total estimated price for food: </h3>
                <p id="totalPrice">$0.00</p>
              </div>
            </fieldset>
          </div>
        </form>

Answer 1

好的，首先您已经使用了 id 两次，这会导致一些问题，而且您需要为这两种形式使用单独的函数。这是新代码：

function priceAddition() {
  var input = document.getElementsByName("option");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }
  document.getElementById("totalPrice").innerHTML = "$" + total.toFixed(2);
}


function priceAddition2() {
  var input = document.getElementsByName("option2");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }
  document.getElementById("totalPrice2").innerHTML = "$" + total.toFixed(2);
}

<form method="post" oninput="priceAddition();">
          <div class="grid-container">
            <fieldset id="fieldset">
              <legend>Prices</legend>
              <div class="items-container">
                <h3>Technology</h3>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="2500"> 4K Television $2500
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="250"> Speakers $250
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="500"> Laptop $500
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option" value="500"> Gaming Console $500
                  </label>
                </div>    
              <div class="items-container">
              <div class="price">
                <br>
                <h3>Total estimated price for technology: </h3>
                <p id="totalPrice">$0.00</p>
              </div>
            </fieldset>
          </div>
        </form>
        
        <form method="post" oninput="priceAddition2();">
          <div class="grid-container">
            <fieldset id="fieldset">
              <legend>Prices</legend>
              <div class="items-container">
                <h3>Food</h3>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option2" value="12.99"> 1kg of Chicken $12.99
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option2" value="5"> Grapes $5
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option2" value="22"> Salmon Fish $22
                  </label>
                </div>
                <div class="item-option">
                  <label class="label">
                    <input type="checkbox" name="option2" value="30"> 12 Donuts $30
                  </label>
                </div>    
              <div class="items-container">
              <div class="price">
                <br>
                <h3>Total estimated price for food: </h3>
                <p id="totalPrice2">$0.00</p>
              </div>
            </fieldset>
          </div>
        </form>