JavaScript 复选框求和

Question

我是一名有用的助手，可以为您翻译文本。

我有一个任务，需要制作一个带有表单和复选框格式项目的“订单”页面。我在JavaScript中编写了一个函数，将标记的复选框的值相加并返回总数。昨天它还能正常工作，但是我可能在昨天做了一些事情而没有注意到，现在它不再添加值了。

以下是该函数：

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" />

我是不是没看到什么？

- Arthur Figueiredo

Answer 1

document.getElementByName("total")是问题所在（不是Element末尾缺少s），应该改为：

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

由于 getElementsByName() 返回元素列表，因此您应该获取第一个元素并使用 [0] 分配值，否则您可以使用 querySelector() ，如下所示：

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" />

- Zakaria Acharki

---

谢谢大家。现在它的工作比以前更好了。但现在唯一的问题是，它在Chrome上不起作用，只能在Firefox上运行。有什么想法吗？ - Arthur Figueiredo

好的，就是这样了。非常感谢。 - Arthur Figueiredo

Answer 2

在JavaScript中没有getElementByName方法，但你可以使用getelementById方法代替，效果一样。

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.getElementById("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" id="total"/>

- Scath

---

谢谢大家。它比以前工作得更好了。现在唯一的问题是，由于某种原因它在Chrome上无法工作，只能在Firefox上工作。有什么想法吗？ - Arthur Figueiredo