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

我没有看到什么吗？

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

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