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")是问题(不是缺少s的Element),应该是:

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