如何向显示添加已选中复选框的总值

问题描述 投票：2回答：3

我正在尝试显示已检查的所有复选框的总值我只尝试过此解决方案

我的描述非常精确且不言自明

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>

我希望文本字段填充值

javascript html
3个回答
0
投票

当实际值在price属性中时，当您尝试计算输入值时，会出现主要问题，因此您可以通过.value更改.getAttribute('price')。

注意：当你需要一个自定义属性时，使用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>
0
投票

要显示所有选中的复选框的总数，并通过计算所有选中的复选框显示总价，您可以使用以下代码：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/

0
投票

以下是代码中的错误：

  • 你没有调用函数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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.