我正在尝试显示所有已选中复选框的总值 我只试过这个解决方案
我的描述非常准确且不言自明
Javascript 函数
如何显示选中的所有复选框的总数。尝试通过计算所有选中的复选框来显示总价。
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>On the go</title>
<link rel="stylesheet" type="text/css" href="menu.scss">
<script>
function calcAndShowTotal() { **
* // declaring the name and total***
var hotbeverage = document.querySelectorAll('input[name="hotbeverage"]');
var total = 0; **
* // checking if any checkboxes have been selected***
for (i = 0; i < hotbeverage.length; i++) { **
* // if the checkbox is selected add the value to total***
if (hotbeverage[i].checked) {
total = total + hotbeverage[i].value;
}
document.getElementById("amount").value = "You order total is R" + total;
}
</script>
***// adding checkboxes***
</head>
<body>
<h1>Hot Beverages</h1>
<div id="pricelist">
<input type="checkbox" name="hotbeverage" value="item1" price="25.00">Americano <b>R25.00</b><br>
<input type="checkbox" name="hotbeverage" value="item2" price="2">Caffe Latte <b>R30.00</b><br>
<input type="checkbox" name="hotbeverage" value="item3" price="3">Cappuccino <b>R15.00</b><br>
<input type="checkbox" name="hotbeverage" value="item4" price="4">Hot Chocolate<b>R20.00</b><br>
<input type="checkbox" name="hotbeverage" value="item5" price="5">Chai Latte <b>R20.00</b><br>
<input type="checkbox" name="hotbeverage" value="item6" price="6">ButterScotch latte<b>R28.00</b><br>
<input type="text" id="amount" value="0" />
</div>
</body>
</html>我希望文本字段填充值
最佳答案
主要问题是当您尝试计算输入的值时实际值在 price 属性中，因此您可以通过以下方式更改 .value .getAttribute('价格').
注意:当您需要自定义属性时，最好使用data-*属性，这样data-price会更有效率, 然后你可以得到这样的值:
parseFloat( hotbeverage[i].dataset.price );
document.querySelector('#calc').addEventListener('click', calcAndShowTotal);
function calcAndShowTotal() {
var hotbeverage = document.querySelectorAll('input[name="hotbeverage"]');
var total = 0;
for (i = 0; i < hotbeverage.length; i++) {
if (hotbeverage[i].checked) {
total += parseFloat( hotbeverage[i].getAttribute('price') );
}
}
document.getElementById("amount").value = "You order total is R " + total;
}<h1>Hot Beverages</h1>
<div id="pricelist">
<input type="checkbox" name="hotbeverage" value="item1" price="25.00">Americano <b>R25.00</b><br>
<input type="checkbox" name="hotbeverage" value="item2" price="2">Caffe Latte <b>R30.00</b><br>
<input type="checkbox" name="hotbeverage" value="item3" price="3">Cappuccino <b>R15.00</b><br>
<input type="checkbox" name="hotbeverage" value="item4" price="4">Hot Chocolate<b>R20.00</b><br>
<input type="checkbox" name="hotbeverage" value="item5" price="5">Chai Latte <b>R20.00</b><br>
<input type="checkbox" name="hotbeverage" value="item6" price="6">ButterScotch latte<b>R28.00</b><br>
<input type="text" id="amount" value="0" />
</div>
<button id="calc">Calculate</button>关于javascript - 如何添加显示选中复选框的总值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55631611/