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

根据下面的答案，我编辑了这篇文章，以提供更多的细节。谢谢大家

编辑：

这是我的代码：

@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

@foreach（$amount\u数据为$amount）
{{$amount->item_name}-{{$amount->amount}{{{$form->currency}}
@endforeach

总计：
@恩迪夫

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>

函数checkTotal（）{
var总和=0，
frm=document.getElementById（“付款单”），
cbs=frm[“项目[]”，
我
对于（i=0；i

表格信息：

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

---

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

您需要使用括号表示法，因为名称中有[]

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

函数checkTotal（）{
var总和=0，
frm=document.getElementById（“付款单”），
cbs=frm[“项目[]”，
我
对于（i=0；i

2

5

10

20

总数：

您需要使用括号表示法，因为名称中有[]

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

函数checkTotal（）{
var总和=0，
frm=document.getElementById（“付款单”），
cbs=frm[“项目[]”，
我
对于（i=0；i

2

5

10

20

总数：

您只需使用以下命令即可获得选中复选框数组的总和：

函数checkTotal（）{
document.listForm.total.value=Array.prototype.reduce.call(
document.listForm.choice，
函数（和，el）{
返回el.checked？总和++el.value:总和；
}, 0
);
}

2

5

10

20

总数：

您只需使用以下命令即可获得选中复选框数组的总和：

函数checkTotal（）{
document.listForm.total.value=Array.prototype.reduce.call(
document.listForm.choice，
函数（和，el）{
返回el.checked？总和++el.value:总和；
}, 0
);
}

2

5

10

20

总数：

以下是使用jQuery的答案。希望这有点帮助！我将侦听器和函数分开，因为我相信这会使以后的编辑更容易。您可以将它们组合在一起以缩短代码

//复选框的侦听器
$（“输入[name='choice']”）。更改（函数（）{
总结（）；
});
//把总数加起来的函数
函数汇总（）{
var总和=0；
$（“输入[name='choice']：选中”）。每个（函数（）{
sum+=parseInt（$（this.val（））；
});
$（“输入[名称=总数]”）.val（总和）；
}

2.


5.


10


20

总计：

以下是使用jQuery的答案。希望这有点帮助！我将侦听器和函数分开，因为我相信这会使以后的编辑更容易。您可以将它们组合在一起以缩短代码

//复选框的侦听器
$（“输入[name='choice']”）。更改（函数（）{
总结（）；
});
//把总数加起来的函数
函数汇总（）{
var总和=0；
$（“输入[name='choice']：选中”）。每个（函数（）{
sum+=parseInt（$（this.val（））；
});
$（“输入[名称=总数]”）.val（总和）；
}

2.


5.


10


20

总计：

是否不使用jQuery？只是确定一下。这是我在网上找到的唯一一个独立工作的代码。但是我可以把它融入我的身体。我正在将jQuery加载到我的页面中，也用于其他目的。请格式化代码，使其可读。是否不使用jQuery？只是确定一下。这是我在网上找到的唯一一个独立工作的代码。但是我可以把它融入我的身体。我正在将jQuery加载到我的页面中，也用于其他目的。请格式化代码，使其可读。对不起。您如何知道要对哪些复选框求和。我在代码中没有看到复选框的名称。我的复选框也在数组中。items[]此代码的作用是获取所有选中复选框的值并将其相加。每次选中/取消选中某个框时，都会运行该对话框。看起来其他答案使用的是

数组

，所以请看一下！我给了你一个解决方案。这是客户端脚本，因此如果您想要在服务器上计算总和（用于数据库等），您需要使用

ajax

传递到PHP，或者作为表单提交，然后在服务器上计算。您应该实际选择要求和的复选框，而不是页面上的所有复选框。@epascarello我知道。我想

Max I

将能够修改代码以精确地满足他们的需求。不过，我已将答案更改为基于复选框的名称而不是类型进行选择。对不起。您如何知道要对哪些复选框求和。我在代码中没有看到复选框的名称。我的复选框也在数组中。items[]此代码的作用是获取所有选中复选框的值并将其相加。每次选中/取消选中某个框时，都会运行该对话框。看起来其他答案使用的是

数组

，所以请看一下！我给了你一个解决方案。这是客户端脚本，因此如果您想要在服务器上计算总和（用于数据库等），您需要使用

ajax

传递到PHP，或者作为表单提交，然后在服务器上计算。您应该实际选择要求和的复选框，而不是页面上的所有复选框。@epascarello我知道。我想

Max I

将能够修改代码以精确地满足他们的需求。不过，我已将答案更改为基于复选框的名称而不是类型进行选择。请尝试此操作。这是我的表格。所以我用付款单代替了列表表，我得到了错误。未捕获引用错误：赋值中的左侧无效，因为它认为您正在尝试减去这两项<代码>付款单，您可以