Javascript - 计算数组中复选框的总和

Question

根据下面的答案，我编辑了该帖子以提供更多详细信息。谢谢大家。

编辑:

这是我的代码:

@foreach($amount_data as $amount)                          
<div class="col-sm-12">                             
<div class="input-checkbox">                               
<div class="inner"></div>
<input type="checkbox" name="items[]" value="{{$amount->amount}}" onchange="checkTotal()" />
</div>
<span>{{$amount->item_name}} - <b>{{$amount->amount}} {{$form->currency}}</b></span>
 </div>
 @endforeach
 <br/>  Total: <input type="text" size="2" name="total" value="0" />
 @endif

Javascript:

<script type="text/javascript">

function checkTotal() {
var sum = 0,
frm = document.getElementById("payment-form"),
cbs = frm["items[]"],
i;
for (i = 0; i < cbs.length; i++) {
if (cbs[i].checked) {
sum += parseInt(cbs[i].value);
}
}
frm.total.value = sum;
}

</script>

表单信息:

 <form action="{{url('secure-checkout/'.$form->unique_url_code)}}" method="POST" id="payment-form" name="payment-form">

似乎不起作用。控制台中没有错误。有什么问题吗？

Answer 1

由于名称中包含 []，您需要使用括号表示法

document.listForm["items[]"][i].checked

function checkTotal() {
  var sum = 0,
    frm = document.getElementById("payment-form"),
    cbs = frm["items[]"],
    i;
  for (i = 0; i < cbs.length; i++) {
    if (cbs[i].checked) {
      sum += parseInt(cbs[i].value);
    }
  }
  frm.total.value = sum;
}

<form name="payment-form" id="payment-form">
  <input type="checkbox" name="items[]" value="2" onchange="checkTotal()" />2<br/>
  <input type="checkbox" name="items[]" value="5" onchange="checkTotal()" />5<br/>
  <input type="checkbox" name="items[]" value="10" onchange="checkTotal()" />10<br/>
  <input type="checkbox" name="items[]" value="20" onchange="checkTotal()" />20<br/> 
  Total: <input type="text" size="2" name="total" value="0" />
</form>