Javascript复选框总和 [英] Javascript checkbox sum

问题描述

我有一个任务，我应该制作一个订单"页面，其中包含一个表单和复选框格式的项目.我在javascript中编写了一个函数来将标记的复选框的值加在一起并返回一个总数.昨天它运行良好，但我昨天可能在没有注意到的情况下做了一些事情并且它不再添加值了.

I have this assignment that I'm supposed to make an "Order" page with a form and items in the checkbox format. I wrote a function in javascript to add the values of the marked checkboxes together and return me a total. It was working fine yesterday, but I might have done something yesterday without noticing and it is not adding the values anymore.

功能如下:

function totalIt() {
  var input = document.getElementsByName("product");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }
  document.getElementByName("total").value = "$" + total.toFixed(2);
}

Select your items:
<br>
<input name="product" value="3.65" type="checkbox" onclick="totalIt()" /> Item 1 - $3.65
<br>
<input name="product" value="5.50" type="checkbox" onclick="totalIt()" /> Item 2 - $5.50
<br>
<input name="product" value="3.29" type="checkbox" onclick="totalIt()" /> Item 3 - $3.29
<br>
<input name="product" value="7.99" type="checkbox" onclick="totalIt()" /> Item 4 - $7.99<br>
<input name="product" value="5.45" type="checkbox" onclick="totalIt()" /> Item 5 - $5.45<br>
<input name="product" value="99.99" type="checkbox" onclick="totalIt()" /> Item 6 - $99.99<br>
<input name="product" value="30.00" type="checkbox" onclick="totalIt()" /> Item 7 - $30.00
<br> Total:
<br>
<input value="$0.00" readonly="readonly" type="text" name="total" />

我没有看到什么吗?

推荐答案

document.getElementByName("total") 是问题所在(不是 ened 处缺少的 sElement)，应该是:

document.getElementByName("total") is the problem (not the missing s at the ened of Element), should be :

document.getElementsByName("total")[0].value = "$" + total.toFixed(2);

由于 getElementsByName() 返回一个元素列表，您应该使用 [0] 获取第一个分配值的元素，否则您可以使用 querySelector() 喜欢:

Since getElementsByName() returns a list of elements you should get the first element to assign the value to using [0], else you could use querySelector() like :

document.querySelector('input[name="total"]').value = "$" + total.toFixed(2);

function totalIt() {
  var input = document.getElementsByName("product");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }
  document.getElementsByName("total")[0].value = "$" + total.toFixed(2);
}

Select your items:
<br>
<input name="product" value="3.65" type="checkbox" onclick="totalIt()" /> Item 1 - $3.65
<br>
<input name="product" value="5.50" type="checkbox" onclick="totalIt()" /> Item 2 - $5.50
<br>
<input name="product" value="3.29" type="checkbox" onclick="totalIt()" /> Item 3 - $3.29
<br>
<input name="product" value="7.99" type="checkbox" onclick="totalIt()" /> Item 4 - $7.99<br>
<input name="product" value="5.45" type="checkbox" onclick="totalIt()" /> Item 5 - $5.45<br>
<input name="product" value="99.99" type="checkbox" onclick="totalIt()" /> Item 6 - $99.99<br>
<input name="product" value="30.00" type="checkbox" onclick="totalIt()" /> Item 7 - $30.00
<br> Total:
<br>
<input value="$0.00" readonly="readonly" type="text" name="total" />

这篇关于Javascript复选框总和的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！