如何使用JavaScript对复选框的值求和

Question

Hey all I am trying to update this code I have. 嘿，我正在尝试更新此代码。 It pretty much does what I need it to except one thing. 除了一件事，它几乎可以满足我的需要。 Well two technically, but mostly one I am concerned with. 从技术上讲，有两个很好，但我主要关心的是一个。 When I check off the boxes I want, it adds up like it is supposed to and adds 5% on top like its supposed to, however it puts the answer in the value of my submit button. 当我勾选所需的框时，它会像预期的那样加起来，并在其应有的上面加上5％，但是它将答案放在“提交”按钮的值中。 How can I stop this from happening? 我该如何阻止这种情况的发生？ Second (and less important for now) How can I make that total value return as a dollar amount with only 2 decimal points, so instead of returning 0.924 it returns $.92 for example. 第二（现在就不那么重要了）我如何才能使总价值以美元的金额返回（只有2个小数点），所以例如，返回0.924而不是返回0.924。 Thanks! 谢谢！

<body>
<h1> The Fruit Form</h1>
<form action="" name="form1" id="form1">
<input type="checkbox" id='fruit0' value=".59" >Apples ( .59)<br>
<input type="checkbox" id='fruit1' value=".49">Oranges (.49)<br>
<input type="checkbox" id='fruit2' value=".39">Bananas(.39)<br>

<input type="submit" onclick="UpdateCost()" id="totalcost" value="Submit">

</form>
<script type="text/javascript">
function UpdateCost() {
  var sum = 0;
  var fid, elem;
  for (i=0; i<3; i++) {
    fid = 'fruit'+i;
    elem = document.getElementById(fid);
    if (elem.checked == true) { sum += Number(elem.value); }
  }
  document.getElementById('totalcost').value = sum.toFixed(2)*1.05;
  alert("Your Total Is:" + totalcost.value);
  return false
} 
</script>
</body>

Answer 1

Your submit-button's id is totalcost and your function gets the element with the id totalcost : 您的提交按钮的ID为totalcost ，您的函数获取的元素的ID为totalcost ：

document.getElementById('totalcost').value = sum.toFixed(2)*1.05;

So you can prevent this by not doing this. 因此，您可以通过不这样做来防止这种情况。

Instead of sum.toFixed(2)*1.05 you should do (sum * 1.05).toFixed(2) as was commented by PSL. 代替sum.toFixed(2)*1.05您应该执行(sum * 1.05).toFixed(2)如PSL所述。

Instead, update your variable: 相反，更新您的变量：

sum = (sum * 1.05).toFixed(2);

or create a new variable say total : 或创建一个新变量，例如total ：

var total = (sum * 1.05).toFixed(2);

or just process it where you output the value: 或仅在输出值的地方处理它：

alert(  (sum * 1.05).toFixed(2)  );

Extra: 额外：
Since you are working with money up to 2 decimal points, I'd like to make you aware of the fact that in javascript 0.1+0.2 is NOT 0.3! 由于您使用的是最多2个小数点的货币，因此我想提醒您一个事实，在JavaScript中0.1 + 0.2不是0.3！

The best way to avoid that is to multiply all numbers by the accuracy you need and devide the final (sub-) result by that precision on output. 避免这种情况的最好方法是，将所有数字乘以所需的精度，并根据输出的精度确定最终（子）结果。

So: (52 cents + 18 cents = 70 cents) / 100 = 0.7 (and here you'd use toFixed so it becomes 0.70 ). 因此：（52美分+ 18美分= 70美分）/ 100 = 0.7（在这里，您将使用toFixed使其变为0.70）。

Answer 2

Just some code comments: 只是一些代码注释：

If can get a reference to the form if you pass this to the function: 如果将此函数传递给函数，则可以获取对表单的引用：

<input type="submit" onclick="UpdateCost(this)"  ...>

In the function: 在函数中：

function UpdateCost(element) {
  var sum = 0;
  var fid, elem;

Store a reference to the form: 存储对表单的引用：

  var form = element.form;

  for (i=0; i<3; i++) {
    fid = 'fruit'+i;
    elem = document.getElementById(fid);

The above can be: 以上可以是：

    elem = form[fid];

    if (elem.checked == true) {
      sum += Number(elem.value);
    }

And that can be: 可以是：

    sum += elem.checked? +elem.value : 0;

where the unary + will convert the value to a number. 一元+会将值转换为数字。

  }
  document.getElementById('totalcost').value = sum.toFixed(2)*1.05;

becomes: 变成：

  form.totalcost.value = '$' + (sum * 1.05).toFixed(2);

HTH. HTH。

如何使用JavaScript对复选框的值求和

问题描述

2 个解决方案

解决方案1
0 已采纳 2013-12-19 03:09:33

解决方案2
0 2013-12-19 03:25:02

如何使用JavaScript对复选框的值求和

问题描述

2 个解决方案

解决方案1 0 已采纳 2013-12-19 03:09:33

解决方案2 0 2013-12-19 03:25:02

解决方案1
0 已采纳 2013-12-19 03:09:33

解决方案2
0 2013-12-19 03:25:02