我有一個簡單的復選框計算器，它幾乎添加了被檢查的專案。我怎樣才能分開總價格。我的問題是選擇食品時它沒有顯示在正確的位置。
有沒有一種方法可以根據勾選的專案在正確的位置顯示價格。我努力使代碼盡可能直觀，任何幫助或提示將不勝感激。
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>uj5u.com熱心網友回復：
好的，首先，您使用了兩次 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/368651.html
標籤：javascript 循环