代码之家 › 专栏 › 技术社区 › stronghold051

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

loops javascript

stronghold051 · 技术社区 · 4 年前

我有一个简单的复选框计算器,它几乎可以添加选中的项目。我怎样才能把总价分开呢。我的问题是,当选择食物时,它不会显示在正确的位置。

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>

1 回复 | 直到 4 年前

PythonProgrammer 4 年前

好的,首先你已经使用了两次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>