Question

我有以下处理订单表格的输入字段，其中包括：

订单日期在名称字段中显示为数组

费用在值字段

上给出

<input type="hidden" name="09-15-2017[]" id="dateprice[]" value="1">
<input type="hidden" name="09-13-2017[]" id="dateprice[]" value="3">
<input type="hidden" name="09-13-2017[]" id="dateprice[]" value="4">
<input type="hidden" name="09-15-2017[]" id="dateprice[]" value="5">

我试图获取警报的输出是：

Total amount on 09-13-2017 is 7
Total amount on 09-15-2017 is 6

这正是我目前正在尝试的：

var chkprice = 0;        
var chkdate = 0;        

var inps = document.getElementsByID('dateprice[]');
for (var i = 0; i <inps.length; i++)
{
  var inp=inps[i];
  var chkprice = inp.value;

  if(chkdate==chkdate)
  {
    chkprice +=chkprice;                
  }
  alert("Total amount on "+chkdate+""+chkprice);
  alert(chkprice);
}

我知道我做了一个糟糕的javascript脚本。任何人都可以指导我获得如上所示的价值吗？

Answer 1

<强> Working fiddle

首先，id属性在同一文档中应该是唯一的，因此您可以使用公共类，如：

<input type="hidden" name="09-15-2017[]" class="dateprice" value="1">
<input type="hidden" name="09-13-2017[]" class="dateprice" value="3">
<input type="hidden" name="09-13-2017[]" class="dateprice" value="4">
<input type="hidden" name="09-15-2017[]" class="dateprice" value="5">

然后你可以使用一个对象来存储一些使用输入名称的对象，如：

var inps = document.querySelectorAll('.dateprice');
var totals = {};

//Sum calculation
for (var i = 0; i <inps.length; i++)
{
  totals[inps[i].name] = (totals[inps[i].name] || 0) + Number(inps[i].value);
}

//Result display
for (var key in totals) {
  if (totals.hasOwnProperty(key)) {
    console.log("Total amount on " + key + " is " + totals[key]);
  }
}

注意：您可以使用replace()从输出中删除括号 [] ，如：

console.log("Total amount on " + key.replace('[]','') + " is " + totals[key]);

希望这有帮助。

＆＃13;

var inps = document.querySelectorAll('.dateprice');
var totals = {};

//Sum calculation
for (var i = 0; i <inps.length; i++)
{
  totals[inps[i].name] = (totals[inps[i].name] || 0) + Number(inps[i].value);
}

//Result display
for (var key in totals) {
  if (totals.hasOwnProperty(key)) {
    console.log("Total amount on " + key + " is " + totals[key]);
  }
}

＆＃13;

<input type="hidden" name="09-15-2017[]" class="dateprice" value="1">
<input type="hidden" name="09-13-2017[]" class="dateprice" value="3">
<input type="hidden" name="09-13-2017[]" class="dateprice" value="4">
<input type="hidden" name="09-15-2017[]" class="dateprice" value="5">

＆＃13;

具有相同名称的输入字段的值和并单独显示它们

1 个答案: