如何添加顯示選中的復選框的總值
[英]How to add a display a total value of the checkbox that are checked
問題描述
我正在嘗試顯示所有已選中復選框的總價值我只嘗試了這種解決方案
我的描述很准確，不言自明
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>
我希望文本字段填充值
3 個解決方案
解決方案1
0 2019-04-11 11:46:39
當實際值位於price屬性中時，當您嘗試計算輸入值時，就會出現主要問題，因此可以通過.getAttribute('price')更改.value 。
注意：最好在需要自定義屬性時使用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>
解決方案2
0 2019-04-11 11:48:23
要顯示所有已選中復選框的總數並通過計算所有已選中復選框來顯示總價，您可以使用以下代碼： html標簽：
測試1
測試2
測試3
測試4
javaScript代碼：
jQuery(document).ready(function($) {
var sum = 0;
$('#pakker :checkbox').click(function() {
sum = 0;
$('#pakker :checkbox:checked').each(function(idx, elm) {
sum += parseInt(elm.value, 10);
});
$('#sum').html(sum);
});
});
另請參閱以下鏈接以獲取更多詳細信息。 http://jsfiddle.net/vaKWs/6/
解決方案3
0 2019-04-11 11:51:55
以下是代碼中的錯誤：
- 您沒有調用
calcAndShowTotal函數。 您應該將事件附加到所有復選框以查看更改。 - 您在增加價值，但應該增加
price。 使用getAttribute復選框的價格。 - 在循環中，您正在聲明全局變量
i。 在它之前使用let。
let hotbeverage = document.querySelectorAll('input[name="hotbeverage"]'); hotbeverage.forEach(x => { x.addEventListener('change',calcAndShowTotal) }) function calcAndShowTotal() { // declaring the name and total*** var total = 0; // checking if any checkboxes have been selected*** for (let i = 0; i < hotbeverage.length; i++) { // if the checkbox is selected add the value to total*** if (hotbeverage[i].checked) { total = total + (+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>
如何將輸入值分配給復選框值，然后計算選中的總數？
[英]How to assign input value to checkbox value, then calculate checked total?
選中復選框后如何為2D復選框的textarea添加值
[英]How to add value to textarea of 2D checkboxes when checkbox is checked
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.